keep-alive 是 vue 的组件实例缓存机制，缓存完整实例（含状态、dom、定时器等），通过 include/exclude 精准控制缓存范围，max 限制启用 lru 清理，并需配合路由注意参数刷新与 name 声明。
keep-alive 不是“让组件不销毁”这么简单，而是 Vue 在内存中建立了一套有策略的实例存档系统。它真正解决的是状态丢失和重复初始化带来的体验断层与性能损耗。
缓存什么：不只是 DOM，而是完整组件实例
keep-alive 缓存的是组件的整个实例（包括 data、computed、watcher、DOM 节点、事件监听器等），而不仅仅是虚拟 DOM 或渲染结果。这意味着表单输入内容、滚动位置、定时器、异步请求状态都能被原样保留。
- 组件首次进入时，正常走 created → mounted 流程
- 切换离开时，不触发 beforeUnmount / unmounted，而是调用 deactivated
- 再次进入时，跳过创建阶段，直接触发 activated，并复用原有实例
- onMounted 只执行一次，适合做一次性初始化；onActivated 每次激活都执行，适合刷新数据或恢复轮询
怎么控制缓存范围：include/exclude 是关键开关
盲目缓存所有组件会快速耗尽内存，必须精准筛选。组件是否被缓存，取决于其 name 选项（不是文件名，也不是标签名）是否匹配规则。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- include 是白名单：只缓存名称在列表中的组件，其余一律销毁
- exclude 是黑名单：匹配的组件强制不缓存，优先级高于 include
- 支持字符串数组：
:include="['Home', 'Search']" - 支持正则表达式：
:exclude="/^Detail.*/"排除所有 Detail 开头的页面 - 组件必须显式声明
name: 'UserProfile'，否则 name 为空，无法匹配
防止内存泄漏：max 限制与 LRU 自动清理
即使设了 include，用户长时间操作也可能积累大量缓存。max 参数就是安全阀，它启用 LRU（最近最少使用）淘汰机制。
-
:max="5"表示最多缓存 5 个组件实例 - 当第 6 个组件需要缓存时，最早被 deactivated 的那个会被自动移出 cache
- cache 内部用 Map 存储实例，keys 用 Set 记录访问顺序，保证淘汰逻辑高效
- 建议对高频切换但低内存占用的 Tab 类组件设 max，对详情页等重组件慎用缓存
搭配路由的最佳实践：避免缓存失效陷阱
把 keep-alive 套在 router-view 上很常见，但要注意两个典型问题：
- 相同路由不同参数未刷新：比如 /user/1 和 /user/2 都命中 User 组件，但缓存只认组件名，不会自动更新。解决方案是在 activated 中手动判断 route.params 并重新拉取数据
- 动态路由组件名不一致：若路由 component 是函数式组件或未设 name，缓存键为空，导致缓存失效。务必确保路由对应的组件导出时带有 name 字段
- 推荐写法：
<keep-alive :include="['Home', 'List']"><router-view></router-view></keep-alive>，比全量缓存更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
