max 必须手动显式配置,否则组件缓存不会有数量上限,内存占用会持续攀升。该属性既支持数字,也支持以字符串形式传入的正整数;如果设置为 0、负数,或传入非数字字符串,那么这个参数将不会生效。缓存数量一旦超过限制,系统会按照 LRU 策略自动移除最久未被激活的组件实例。除此之外,还建议结合 include/exclude 缩小缓存范围,并在组件内部主动清理副作用,这样整体运行会更加安全、稳定。

必须显式设置 max 值,否则缓存没有上限,内存会不断增长。Vue 的 如果不配置 max,本质上就是“进入一个缓存一个”,尤其在路由频繁切换或动态组件高频切换的场景下,很容易导致内存压力增大,严重时甚至可能造成内存泄漏。
max 属性怎么设置才会生效
它支持数字类型和字符串类型,但取值必须是正整数,表示最多允许保留多少个组件实例:
- 直接传数字:
- 传字符串同样有效:
- 不能设置为 0、负数或非数字字符串(例如
"abc"),否则配置失效,最终会退回到无限制缓存 - 当值为
1时,表示只保留最近一次使用的组件,之前的缓存实例会立即被移除
超过 max 后如何淘汰:LRU 策略会自动执行
当缓存中的组件数量超出 max 设定值后,KeepAlive 会按照 LRU(Least Recently Used,最近最少使用)机制自动清理:
- 它不是随机删除,也不是按组件注册顺序删除,而是优先淘汰“最长时间没有被激活”的那个实例
- 例如已经缓存了 A→B→C→D 四个组件,且
max=3,这时再切换到 E,A 就会被移出缓存(前提是 A 是最早一次被activated的) - 整个淘汰过程完全自动,无需开发者手动处理,但前提是组件要在
deactivated中正确清理副作用,例如清除定时器、取消请求等
结合 include/exclude 更精确地控制缓存范围
仅仅依赖 max 往往还不够,因为这样可能会把不需要缓存的组件也一起保留下来。更推荐同时配合过滤策略使用:
- 通过
include明确指定需要缓存的组件: - 通过
exclude排除高开销或状态容易混乱的组件: - 组件本身必须声明
name选项(在 Vue ≥3.2.34 中会自动推导)后,才能被include/exclude正常匹配
实际项目部署时的重点检查项
正式上线前,建议重点确认以下几个方面:
- 所有
组件都已经配置了:max,不要依赖默认值或直接不设置 - 高频切换的页面组件(如列表页、搜索页)已经纳入
include白名单,避免关键缓存被误删 - 体积较大的组件(例如包含大量 DOM 或 Canvas 渲染的页面)已经加入
exclude,或单独配置较小的max - 每个被缓存组件都在
deactivated生命周期钩子中处理好了定时器、EventSource、未完成 Promise 等资源清理问题
