Vue3中Transition与KeepAlive结合缓存失效问题求助

问题出在你给KeepAlive外层的div设置了随组件变化的key——每次切换组件时，这个div会被销毁并重新创建，导致内部的KeepAlive也跟着重建，自然无法保留组件状态。

要同时实现过渡动画和组件缓存，只需调整结构，移除外层带key的div，让KeepAlive直接作为Transition的子元素，并确保动态组件的key正确设置：

修改后的主组件代码：

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <br/>Current:{{current.__name}}
    <Transition mode="out-in">
      <KeepAlive>
        <component :is="current" :key="current.__name"></component>
      </KeepAlive>
    </Transition>
  </div>
</template>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

原理说明 #

1. Transition的mode="out-in"会确保旧组件完全离开后，新组件才进入，避免过渡重叠。
2. 动态组件的key绑定current.__name，让Vue能识别组件切换，触发Transition动画。
3. KeepAlive直接作为Transition的子元素，不会随组件切换被销毁，因此能正常缓存CompA和CompB的状态（比如CompA的count值、CompB的输入框内容）。

CompA.vue和CompB.vue代码保持不变即可。

内容的提问来源于stack exchange，提问作者mvaculisteanu