KeepAlive 不自动清理关闭标签页的缓存，需通过动态维护 include 数组实现精准剔除；配合 Pinia 管理 tab 列表，并在 beforeUnmount 中手动清理定时器、请求和事件监听器以防止内存泄漏。

KeepAlive 本身不会自动释放关闭标签页的缓存，它只管“缓存”，不管“清理”。标签页关闭时，若不主动干预，对应组件实例仍驻留在内存中：响应式数据、定时器、事件监听器、DOM 节点全保留，久而久之就会内存飙升、页面卡顿甚至崩溃。

关键在区分“切换”和“关闭”

用户切走一个 tab 是临时离开，需要保留状态；但点击 × 关闭 tab，就是明确要丢弃这个上下文。系统必须识别这个动作，并触发对应缓存的销毁。

核心难点在于：<KeepAlive> 没有内置的“按需删除某一项”的 API，它的 include/exclude 是声明式控制，max 是被动淘汰，都不响应标签页管理逻辑。

用 include 动态控制最稳妥

把所有当前打开的 tab 对应的组件名（或带唯一标识的 key）维护在一个响应式数组里，作为 <KeepAlive :include="caches"> 的值。每次关闭 tab，就从数组中移除对应项 —— Vue 内部会立刻执行清理逻辑，销毁该组件实例及其全部子组件、响应式依赖和副作用。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 组件名不够用？就用路由 fullPath 或自定义 key（如 OrderDetail__1001），确保每个 tab 实例唯一可识别
• 配合 Pinia 存储 tab 列表，用 watch 监听变化，自动同步 caches 数组
• 避免直接操作 keep-alive 内部 cache 对象，那是非公开 API，Vue 版本升级可能失效

关闭时手动触发缓存剔除（进阶）

如果需要更精细控制（比如保留部分状态、延迟清理、或清理前做日志/备份），可以借助 keep-alive 的内部机制：

• 通过 ref 获取 <KeepAlive> 组件实例，访问其 cache 和 keys
• 按 key 查找并调用 pruneCacheEntry(key)（需自行从源码提取或封装）
• 注意：此方式绕过 Vue 响应式更新，需手动 nextTick 后再重新 addCache（如需重载）

别忘了组件自身的资源清理

即使缓存被清除，组件里没卸载的定时器、未解绑的全局事件、未取消的请求，依然会泄漏。务必在 beforeUnmount 中统一收尾：

• 清除所有 setInterval/setTimeout ID
• 调用 AbortController.abort() 取消进行中的 fetch 请求
• 解绑 window.addEventListener 等手动绑定的监听器
• Pinia store 中与该 tab 强相关的 state，可在关闭时显式重置