动态组件切换时状态丢失的根本原因是Vue默认销毁并重建组件实例；用KeepAlive包裹可使其保留在内存中不销毁，从而保留状态，并支持include/exclude过滤、onActivated/onDeactivated钩子及max限制等精准控制。
动态组件切换时状态丢失，根本原因在于 Vue 默认会销毁并重建组件实例。用 KeepAlive 包裹动态组件，就能让组件在切换时保留在内存中，不销毁、不重新渲染，状态自然就留住了。
KeepAlive 基础用法：包裹需要缓存的动态组件
当使用 <component :is="currentComponent"></component> 切换组件时，直接套一层 <KeepAlive> 即可：
<KeepAlive>
<component :is="currentComponent" />
</KeepAlive>
注意：KeepAlive 是内置组件，无需 import，但必须用 PascalCase 写法（首字母大写）；Vue 3 中推荐写成 <KeepAlive>，不是 <keep-alive>（后者在某些构建环境下可能失效）。
精准控制缓存：用 include/exclude 过滤组件
不是所有动态组件都需要缓存。可通过 include 或 exclude 指定组件名（需提前设置 name 选项）：
- 只缓存特定组件：
<KeepAlive :include="['FormPage', 'DetailPage']">...</KeepAlive> - 排除某些组件（如含实时数据的）：
<KeepAlive :exclude="['LiveFeed', 'Counter']">...</KeepAlive> - 支持正则：
:include="/^(Form|Detail)/"（注意加引号并用 v-bind）
配合组件生命周期：捕获缓存钩子
被 KeepAlive 包裹的组件不会触发 mounted 和 unmounted，但会新增两个专属钩子：
-
onActivated()：组件被激活（从缓存中显示）时触发，适合恢复定时器、重新订阅事件 -
onDeactivated()：组件失活（进入缓存）时触发，适合清理定时器、取消请求、暂停视频等
例如表单页离开前保存草稿，回来时自动还原：
onDeactivated(() => {
localStorage.setItem('form-draft', JSON.stringify(formData));
});
onActivated(() => {
const draft = localStorage.getItem('form-draft');
if (draft) formData.value = JSON.parse(draft);
});
进阶技巧：手动控制缓存（基于 key 或 max 限制）
默认 KeepAlive 会无限缓存，实际项目中建议设限：
- 用
max="5"控制最多缓存 5 个组件实例：<KeepAlive :max="5">...</KeepAlive> - 给动态组件加唯一
key，避免同名组件互相覆盖缓存：<component :is="currentComponent" :key="route.path" /> - 需要强制刷新某组件？临时修改其 key（如加时间戳），触发新实例创建
