动态组件切换时状态丢失的根本原因是vue默认销毁并重建组件实例；用keepalive包裹可使其保留在内存中不销毁，从而保留状态，并支持include/exclude过滤、onactivated/ondeactivated钩子及max限制等精准控制。
动态组件负责灵活切换，keep-alive 负责状态保留——二者配合，才能真正解决“切走再回来就重置”的问题。光用动态组件，每次切换都会销毁重建；只套 keep-alive 不加控制，又容易缓存过多、拖慢内存。关键在用对地方、控好范围。
动态组件怎么写才支持缓存
必须确保被切换的组件有明确的 name，否则 keep-alive 无法识别和匹配。在 <script setup></script> 中，Vue 3.2.34+ 会自动根据文件名推导 name（如 Profile.vue → name 为 "Profile"）；若使用旧版或需自定义，需手动声明：
defineOptions({ name: 'UserProfile' })- 或在导出对象中写
name: 'UserProfile'
同时，<component :is></component> 的值建议直接传入组件本身（如 ref(Profile)），而非字符串名，避免注册/解析开销。
keep-alive 缓存策略怎么设才合理
默认缓存所有，但实际项目中往往只需保几个关键页。用 include/exclude 精准控制：
-
include="['Home', 'ListPage']"：只缓存指定名称的组件 -
exclude="['DetailPage']"：排除详情页这类无需回溯状态的页面 - 正则写法：
:include="/^(Home|List)/"，适合命名有规律的场景 - 务必搭配
max="5"，启用 LRU 淘汰机制，防内存堆积
被缓存组件的生命周期怎么用
缓存组件不会反复触发 mounted/unmounted，而是新增两个专属钩子：
-
onActivated：组件从缓存中激活显示时触发，适合刷新数据、恢复定时器、聚焦输入框 -
onDeactivated：组件被切走、进入缓存时触发，适合暂停轮询、取消未完成请求、保存滚动位置
注意：初始化逻辑（如首次加载数据）仍应放在 onMounted 或 onBeforeMount 中，避免每次激活都重复执行。
和 vue-router 配合的常见写法
在路由层面缓存，通常包裹 <router-view></router-view>：
- 基础写法：
<keepalive><router-view></router-view></keepalive> - 按路由条件缓存：
<keepalive :include="cachedRoutes"><router-view></router-view></keepalive>，其中cachedRoutes可根据route.meta.keepAlive动态计算 - 避免嵌套路由全缓存：用
v-slot解构，只对需要的层级加 KeepAlive
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
