keep-alive 通过激活/停用钩子（activated/deactivated）控制缓存组件状态，避免销毁重建；支持 include/exclude/max 精准缓存管理，并可结合路由元信息实现页面级缓存策略。
Vue.js 中的 keep-alive 本身不直接触发生命周期钩子，但它会改变组件的挂载/卸载行为，从而让 activated 和 deactivated 这两个专属钩子生效——这是控制缓存组件状态的核心机制。
keep-alive 与生命周期钩子的关系
keep-alive 包裹的组件不会被真正销毁（beforeDestroy / destroyed 不触发），也不会重复创建（beforeCreate / created 只在首次进入时执行）。取而代之的是：
-
activated：组件被激活（从缓存中显示）时调用，适合恢复定时器、重新监听事件、发起数据刷新 -
deactivated：组件被停用（进入缓存但隐藏）时调用，适合清理定时器、取消请求、解绑事件监听 -
mounted和unmounted（Vue 3）或beforeMount（Vue 2）仍只在首次挂载/最终卸载时触发，不是每次显隐
精准控制哪些组件需要缓存
用 include / exclude / max 属性避免无差别缓存：
-
include="UserProfile,OrderList"：只缓存指定组件名（需与name选项一致） -
exclude="SearchResult,PreviewModal"：排除某些高频切换或无需状态保留的组件 -
max="5"：限制最多缓存 5 个实例，超出时按 LRU 策略移除最久未用的 - 动态控制：绑定
:include="cachedComponents"，在 JS 中增删组件名字符串实现运行时启停缓存
在 activated/deactivated 中管理副作用
常见状态同步场景示例：
立即学习“前端免费学习笔记（深入）”；
- 表单草稿保存：
deactivated中把当前输入暂存到 Vuex 或 localStorage；activated中读取并还原 - 滚动位置保持：在
deactivated记录this.$el.scrollTop；activated中恢复（注意 DOM 是否已就绪） - 定时任务控制：如轮询订单状态，
activated启动setInterval，deactivated用clearInterval清理，防止内存泄漏 - 第三方库实例管理：例如地图组件，
deactivated调用map.destroy()释放资源，activated重建
配合 Vue Router 实现页面级缓存策略
在路由视图中使用 keep-alive，并通过路由元信息定义缓存规则：
- 路由配置中添加
meta: { keepAlive: true } - 模板中：
<keep-alive :include="cachedViews"><router-view /></keep-alive> - 计算属性
cachedViews动态收集当前所有route.matched中meta.keepAlive === true的组件名 - 配合
beforeRouteLeave或beforeRouteUpdate预处理缓存逻辑（如清空某类页面缓存）
