KeepAlive 最大缓存实例数必须通过 max 属性显式设置正整数，否则内存持续累积；超出时按 LRU 自动淘汰最久未用实例，并需配合 include/exclude 精准控制缓存范围及组件内手动清理副作用。
KeepAlive 最大缓存实例数必须通过 max 属性显式设置，否则缓存会无限增长，存在内存持续累积风险。 Vue 不会默认限制缓存数量，不设 max 就等于“来一个存一个”，尤其在动态组件或路由频繁切换场景下，极易引发内存压力升高甚至泄漏。
max 属性怎么写才有效
它支持字符串或数字类型，值为正整数，表示最多保留几个组件实例：
- 直接写数字：
<keep-alive max="5"><component :is="view"></component></keep-alive> - 绑定响应式变量：
<keep-alive :max="cacheLimit">...</keep-alive>，适合根据环境或用户权限动态调整 - 注意：设为
0或非正数等同于未启用缓存；设为1表示只保留最近一次访问的组件，其余立即淘汰
超出 max 后怎么回收？LRU 是核心机制
Vue 内部用一个数组（this.keys）记录组件 key 的访问顺序。每次组件被激活，就把它移到数组末尾；当新增缓存且超过 max 时，自动移除数组开头那个——也就是“最久没被用过的”实例。
- 举例：缓存上限为 3，当前缓存了 A → B → C（按访问时间从前到后），此时激活 D → 缓存满 → 移除 A，新队列为 B → C → D
- 这个过程是自动的、无感的，不需要手动清理，但前提是每个组件有稳定可识别的
key或name - 若组件未声明
name，又没显式设vnode.key，可能导致 key 冲突或无法命中缓存，间接影响 LRU 正常运作
光靠 max 还不够：配合 include/exclude 精准控缓存范围
max 控制“数量上限”，而 include 和 exclude 决定“哪些能进”。两者配合才能真正防溢出：
- 优先用
include白名单：只缓存明确需要状态保持的组件，比如列表页、表单页，避免把弹窗、提示框等临时组件也塞进去 - 慎用
exclude黑名单：适合排除已知高频创建/销毁、或自身易泄漏的组件（如含第三方地图、视频播放器的页面） - 支持多种写法：字符串（
"UserList"）、逗号分隔（"A,B,C"）、正则（:include="/^Detail.*/"）、数组（:include="['Home', /List/] "）
别忘了组件自身的内存管理
keep-alive 只负责“不销毁实例”，但不会帮你清理组件内部的副作用。如果组件里有：
- 未清除的定时器（
setInterval） - 未解绑的全局事件监听（
window.addEventListener） - 未释放的大对象引用（如缓存的图片 blob、WebSocket 实例）
这些都会随组件实例一起留在内存中，长期积累照样导致内存增长。务必在 deactivated 钩子中做清理，在 activated 中恢复必要逻辑。
