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 中恢复必要逻辑。