vue 3 中 keepalive 与 transitiongroup 不能直接嵌套，因二者机制冲突；应使用 transition（非 group）包裹 keepalive 实现缓存组件的页面切换动画，如 router-view 场景中通过 v-slot 解构 component 并配合 include 和 mode="out-in" 实现高效路由动画。
Vue 3 中 KeepAlive 和 TransitionGroup 不能直接嵌套使用，因为 KeepAlive 缓存的是组件实例，而 TransitionGroup 需要对多个同级节点进行 DOM 列表动画控制 —— 二者作用层级和机制不同。但可以通过合理组合实现“缓存 + 页面/路由切换动画”的效果。
核心思路：用 KeepAlive 缓存组件，用 Transition 控制单个组件的进入/离开动画
TransitionGroup 适用于 v-for 渲染的多个兄弟节点（如列表项），而路由或视图切换通常是单个组件替换。所以实际场景中，更常用的是 Transition（非 Group）配合 KeepAlive 实现页面级过渡动画。
-
KeepAlive包裹动态组件（如<component :is="currentView"></component>或<router-view></router-view>），负责缓存状态 -
Transition包裹KeepAlive，定义进入/离开的 CSS 类或 JS 钩子 - 避免把
TransitionGroup直接套在KeepAlive外层 —— 它会报错或失效，因KeepAlive只渲染一个子组件，不满足TransitionGroup对多子节点的要求
RouterView 场景：用 Transition + KeepAlive 实现带缓存的路由动画
在基于 Vue Router 的应用中，这是最常见需求。正确写法如下：
<router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><keep-alive include="UserProfile,ArticleList"><component :is="Component"></component></keep-alive></transition></router-view>
说明：
-
v-slot解构出Component，确保KeepAlive接收的是动态组件而非抽象节点 -
include指定需缓存的组件名（需与name选项一致），避免无差别缓存影响性能 -
mode="out-in"防止新旧组件同时显示，让离开动画完成后再进入新组件 - CSS 动画类（如
.fade-enter-active）作用于被缓存的组件根元素，即使组件被复用，动画钩子仍会触发（因为v-if或组件卸载/挂载逻辑由router-view控制）
手动切换组件时：用 v-if + Transition + KeepAlive
若不用路由，而是通过状态切换视图（如 tab 切换），可这样组织：
<transition name="slide" mode="out-in"><keep-alive><userprofile v-if="view === 'user'" key="user"></userprofile><settings v-if="view === 'settings'" key="settings"></settings></keep-alive></transition>
关键点：
- 每个组件必须有唯一
key，否则Transition无法区分新旧节点，动画可能不触发 -
KeepAlive内部多个v-if组件是互斥渲染的，它只缓存当前激活的那个；切换时旧组件被停用（deactivated），新组件被激活（activated），Transition仍能捕获切换过程 - 动画样式建议使用 transform + opacity，保证性能；避免触发布局重排
进阶：监听 activated/deactivated 控制局部动画
如果需要在组件被缓存后再次激活时执行特定动画（比如数据刷新后的淡入），可在组件内部结合生命周期钩子：
export default {
name: 'UserProfile',
setup() {
onActivated(() => {
// 组件从缓存中激活时触发
document.querySelector('.content').classList.remove('hidden');
document.querySelector('.content').offsetHeight; // 强制 reflow
document.querySelector('.content').classList.add('fade-in');
});
return () => h('div', { class: 'content hidden' }, '用户信息');
}
}
这种方式适合细粒度控制，不依赖外层 Transition，但需自行管理 CSS 类和时机。
不复杂但容易忽略的是：KeepAlive 不会重新创建组件实例，所以 mounted 不会再次执行；动画逻辑应放在 activated 或通过 key 强制更新来触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
