Vue 组件缓存如何配合 max 属性限制最大缓存组件实例的数量

必须显式设置 max 值，否则缓存无上限导致内存持续增长；max 支持数字或字符串类型的正整数，设为0、负数或非数字字符串则失效，超出时按 LRU 自动淘汰最久未激活实例，并需配合 include/exclude 精准控制缓存范围及组件内手动清理副作用。

必须显式设置 max 值，否则缓存无上限，内存会持续增长。Vue 的 <KeepAlive> 不设 max 就等于“来一个存一个”，尤其在路由频繁跳转或动态组件大量切换时，极易引发内存压力升高甚至泄漏。

max 属性怎么写才有效

它支持数字或字符串类型，值必须是正整数，表示最多保留几个组件实例：

1. 直接写数字：<KeepAlive :max="5">
2. 写字符串也行：<KeepAlive max="5">
3. 不能为 0、负数或非数字字符串（如 "abc"），否则失效，退化为无限制缓存
4. 值为 1 表示只缓存最新一个组件，之前缓存的立即被剔除

超出 max 后怎么淘汰：LRU 策略自动生效

当缓存组件数量超过 max 设定值时，KeepAlive 会按 LRU（Least Recently Used，最近最少使用）规则自动清理：

1. 不是随机删，也不是按注册顺序删，而是找“最久没被激活”的那个实例
2. 比如缓存了 A→B→C→D 四个组件，max=3，此时切换到 E，A 会被移出缓存（假设 A 是最早一次被 activated 的）
3. 该过程完全自动，无需手动干预，但需确保组件正确实现 deactivated 中的副作用清理（如清除定时器、取消请求）

配合 include/exclude 精准控制缓存范围

光靠 max 不够，容易把不该缓存的组件也塞进去。建议叠加过滤策略：

1. 用 include 明确只缓存指定组件：<KeepAlive :include="['UserList', 'OrderDetail']" :max="3">
2. 用 exclude 排除高开销或状态易错乱的组件：<KeepAlive :exclude="['ReportChart']" :max="5">
3. 组件必须声明 name 选项（<script setup> 在 Vue ≥3.2.34 中会自动推导）才能被 include/exclude 匹配

实际部署时的关键检查点

上线前建议确认这几项是否到位：

1. 所有 <KeepAlive> 标签都设置了 :max，不接受默认不设值
2. 高频切换的组件（如列表页、搜索页）已纳入 include 白名单，避免被误剔
3. 大体积组件（含大量 DOM 或 Canvas 渲染）已加入 exclude 或单独设低 max
4. 每个被缓存组件的 deactivated 钩子中，已清理定时器、EventSource、未完成的 Promise 等资源