Bug KeepAlive and Transition: Changing a child component in KeepAlive before the component is unmount will cause an error

[LittleSound]

Vue version

>= v3.2.27

Link to minimal reproduction

Vue SFC Playground

Steps to reproduce

1. Click Comp2
2. Click Change Enabled

What is expected?

No errors

What is actually happening?

The first time I encountered this error was in the following code. After switched pages, the actual data in route.query would disappear when the beforeUnmount lifecycle takes place which caused the v-if in KeepAlive to be triggered where it will result in the error "The routing process was interrupted and the page crashed" eventually.

I don't have a way to use vue-router in Playground, so I chose to reproduce the bug by manually changing the variables when appropriate.

<script setup lang="ts">
const route = useRoute()
const formModel = computed<any>(() => route.query['model'])
</script>

<template>
  <Transition name="fade" mode="out-in">
    <KeepAlive>
      <AForm v-if="formModel === '1'" />
      <BForm v-else />
    </KeepAlive>
  </Transition>
</template>

System Info

No response

Any additional comments?

No response

[baiwusanyu-c]

try this ？

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

[LittleSound]

Thanks, the change does work!
But I don't know if this will cause other problems by not following the API documentation.

I'm just following the usage taught in the documentation:

Api: KeepAlive

[baiwusanyu-c]

Thanks, the change does work! But I don't know if this will cause other problems by not following the API documentation.

I'm just following the usage taught in the documentation:

Api: KeepAlive

You can try the <component/> instead of using v-if

[LittleSound]

You can try the <component/> instead of using v-if

Thank you very much. This does work and follows the documentation, I will try to use this in my project to fix the error. But what happens when using v-if v-else does seem to be a bug.

[LittleSound]

You can try the <component/> instead of using v-if

Thank you very much. This does work and follows the documentation, I will try to use this in my project to fix the error. But what happens when using v-if v-else does seem to be a bug.

Maybe I'm wrong, and I'm getting this error with <component /> as well, here's a recurrence of using <component />: Vue SFC Playground

[zhangzhonghe]

try this ？

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

This will make keepAlive not work.

[baiwusanyu-c]

try this ？

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

This will make keepAlive not work.

you are right.maybe it is a bug