通过缓存组件实例保留状态、跳过重复创建，支持include/exclude/max控制缓存范围，需用onactivated替代onmounted处理数据刷新，并提供activated/deactivated钩子管理生命周期。
直接用 <keep-alive></keep-alive> 包裹目标组件，就能缓存其实例、保留状态、跳过重复创建和挂载过程。 它不是魔法，但机制清晰：组件切走时不销毁，再回来时直接激活复用，DOM、data、滚动位置、表单输入全都在。
基础用法：包裹动态组件或路由视图
最常见两种场景：
- 缓存动态组件：
<keep-alive><component :is="currentComp"></component></keep-alive> - 缓存路由页面：
<keep-alive><router-view></router-view></keep-alive>（推荐放在布局组件中）
注意：<keep-alive></keep-alive> 是抽象组件，不渲染真实 DOM，也不出现在父组件链里，只起“缓存开关”作用。
按需缓存：用 include/exclude 精确控制
别一股脑缓存所有页面——详情页、编辑页通常不该缓存，否则用户看到的永远是旧数据。
-
include：只缓存指定名称的组件，值可以是字符串（如"List"）、正则（/^List/）或数组（["List", "Home"]） -
exclude：排除特定组件，比如exclude="Detail"，让详情页每次进都重新加载 -
max：限制最多缓存几个实例，防内存泄漏，例如max="5"
实际推荐结合路由元信息使用：v-if="$route.meta.keepAlive" 控制是否进 <keep-alive></keep-alive>，比全局 include 更灵活。
数据刷新：靠 onActivated 而不是 onMounted
组件被 <keep-alive></keep-alive> 缓存后，onMounted 只执行一次。切走再切回，不会重新挂载，所以请求不会重发。
- ✅ 正确做法：把数据加载逻辑抽成函数，同时在
onMounted和onActivated中调用 - ❌ 错误写法：只在
onMounted里发请求，切回来就是陈旧数据
示例：
const loadData = () => { fetch('/api/list').then(...); };<br>onMounted(loadData);<br>onActivated(loadData);
生命周期钩子：activated/deactivated 是关键入口
被 <keep-alive></keep-alive> 包裹的组件会多出两个专属钩子：
-
onActivated：组件每次被激活（显示）时触发，适合刷新数据、恢复定时器、聚焦输入框 -
onDeactivated：组件失活（隐藏）时触发，适合清理定时器、取消未完成请求、保存临时状态
这两个钩子是保持缓存组件“鲜活”的核心手段，比手动管理 ref 或 watch 更直接可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
