必须显式设置 max 值，否则缓存无上限导致内存持续增长；max 支持数字或字符串类型的正整数，设为0、负数或非数字字符串则失效，超出时按 LRU 自动淘汰最久未激活实例，并需配合 include/exclude 精准控制缓存范围及组件内手动清理副作用。
必须显式设置 max 值，否则缓存无上限，内存会持续增长。Vue 的 <KeepAlive> 不设 max 就等于“来一个存一个”，尤其在路由频繁跳转或动态组件大量切换时，极易引发内存压力升高甚至泄漏。
max 属性怎么写才有效
它支持数字或字符串类型，值必须是正整数，表示最多保留几个组件实例：
- 直接写数字：
<KeepAlive :max="5"> - 写字符串也行：
<KeepAlive max="5"> - 不能为 0、负数或非数字字符串（如
"abc"），否则失效，退化为无限制缓存 - 值为
1表示只缓存最新一个组件，之前缓存的立即被剔除
超出 max 后怎么淘汰：LRU 策略自动生效
当缓存组件数量超过 max 设定值时，KeepAlive 会按 LRU（Least Recently Used，最近最少使用）规则自动清理：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不是随机删，也不是按注册顺序删，而是找“最久没被激活”的那个实例
- 比如缓存了 A→B→C→D 四个组件，
max=3，此时切换到 E，A 会被移出缓存（假设 A 是最早一次被activated的） - 该过程完全自动，无需手动干预，但需确保组件正确实现
deactivated中的副作用清理（如清除定时器、取消请求）
配合 include/exclude 精准控制缓存范围
光靠 max 不够，容易把不该缓存的组件也塞进去。建议叠加过滤策略：
立即学习“前端免费学习笔记（深入）”；
- 用
include明确只缓存指定组件：<KeepAlive :include="['UserList', 'OrderDetail']" :max="3"> - 用
exclude排除高开销或状态易错乱的组件：<KeepAlive :exclude="['ReportChart']" :max="5"> - 组件必须声明
name选项（<script setup>在 Vue ≥3.2.34 中会自动推导）才能被include/exclude匹配
实际部署时的关键检查点
上线前建议确认这几项是否到位：
- 所有
<KeepAlive>标签都设置了:max，不接受默认不设值 - 高频切换的组件（如列表页、搜索页）已纳入
include白名单，避免被误剔 - 大体积组件（含大量 DOM 或 Canvas 渲染）已加入
exclude或单独设低max - 每个被缓存组件的
deactivated钩子中，已清理定时器、EventSource、未完成的 Promise 等资源
