KeepAlive 负责缓存组件实例，Transition 控制显隐与过渡；须 Transition 包 KeepAlive，v-if 作用于内部组件，配合 key 和 mode="out-in" 避免动画错乱，合理使用 onActivated/onDeactivated 及正确 CSS 类名实现丝滑动画。
结构要点：Transition 包 KeepAlive，v-if 控制内部组件
不能把 v-if 加在
外层包裹，管理「是否渲染」和动画时机 内层包裹，管理「是否复用实例」，通过 include 白名单限定缓存范围 或具体路由组件放在 KeepAlive 内部，并用 v-if 控制其显隐（比如根据 route.name 或 meta.flag）
典型写法：
<Transition name="slide">
<KeepAlive include="Home,Profile,Setting">
<component :is="currentComponent" v-if="shouldShow" />
</KeepAlive>
</Transition>
关键细节：key 和 mode 配合避免动画错乱
Vue 需要明确区分新旧节点才能触发 Transition。如果仅靠 :is 切换，且组件名不变，可能跳过动画。
- 给
添加动态 :key，例如 :key="route.path + route.query.timestamp"或简单用:key="route.fullPath" - 设置
的 mode="out-in"，确保离开动画完成后再开始进入动画，防止重叠或白屏 - 若使用
，务必把 放在 v-slot 内部，而非包裹整个 router-view
生命周期钩子补足动画逻辑
onActivated / onDeactivated 是缓存组件独有的时机，可用来同步动画状态：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 在 onActivated 中恢复滚动位置、重新获取非实时数据、启动定时器
- 在 onDeactivated 中保存表单草稿、暂停轮询、清理副作用
- 如需操作 DOM 尺寸（比如 height 过渡），建议在 onActivated 的 nextTick 中执行
CSS 动画类名别写错
Vue 3 的类名后缀已更新，注意区分：
- xxx-enter-from：入场起始样式（如 opacity: 0）
- xxx-enter-active：入场过渡过程（如 transition: all 0.3s ease）
- xxx-enter-to：入场结束样式（如 opacity: 1）
- xxx-leave-from：离场起始样式
- xxx-leave-active：离场过渡过程
- xxx-leave-to：离场结束样式
例如 slide-left 动画：
.slide-left-enter-from { opacity: 0; transform: translateX(20px); }
.slide-left-enter-to { opacity: 1; transform: translateX(0); }
.slide-left-leave-from { opacity: 1; transform: translateX(0); }
.slide-left-leave-to { opacity: 0; transform: translateX(-20px); }
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 0.3s ease;
}
