应有节制地使用 keep-alive，避免缓存万级列表等数据密集型页面；可通过 exclude 过滤、卸载前清空数据、结合虚拟滚动及异步缓存策略来控内存。
直接用 keep-alive 缓存含大型数据列表的组件，很容易导致内存持续堆积——比如万级商品列表、聊天记录页缓存后，DOM 节点和数据对象都保留在内存里，下次进入直接复用，看似快了，实则悄悄吃掉几百MB内存。关键不是禁用缓存，而是让缓存“有节制”。
按需缓存，避开数据密集型页面
不是所有页面都适合加 keep-alive。对列表类组件，优先排除高数据量页面：
- 用
exclude明确过滤掉含大数据列表的路由名或组件名，例如：<keep-alive :exclude="['GoodsList', 'ChatHistory']"><router-view/></keep-alive> - 把列表页设为“非缓存态”，而只缓存详情页、设置页等轻量组件，既保体验又控内存
- 若必须缓存列表页，改用
include白名单方式，只放几个确定轻量的组件，避免漏网
缓存前清理数据，不缓存原始大数据
组件实例本身可以缓存，但里面的海量数据不必一起留着。在组件卸载前主动剥离：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听
beforeUnmount（Vue 3）或beforeDestroy（Vue 2），清空data.list或重置为[] - 把原始数据存在 Vuex/Pinia 中，组件只持 ID 或分页参数；缓存时只保留状态标识，数据按需重新拉取或从 store 获取
- 对表格类组件（如 el-table），卸载时调用
this.$refs.table?.doLayout?.()并清空data，释放内部渲染缓存
结合虚拟滚动，降低单次渲染压力
即使组件被缓存，只要列表本身用了虚拟滚动（如 vue-tui 或自研方案），就能大幅减少 DOM 数量和内存驻留：
立即学习“前端免费学习笔记（深入）”；
- 虚拟滚动组件本身不依赖 keep-alive 也能高效运行，它只渲染可视区域，天然对抗内存膨胀
- 配合
key动态控制：当列表数据源变更（如搜索条件变化），更新:key="searchKey"，强制重建虚拟滚动实例，避免旧数据残留 - 固定行高比可变行高更省内存，如能统一，优先启用，减少布局计算开销
用异步加载 + 缓存策略替代全量缓存
与其缓存整个带数据的组件，不如缓存“数据获取逻辑”本身：
- 对下拉选择器、分类树等静态/半静态数据，用本地缓存（如 Map 或 sessionStorage）+ 过期时间控制，而非缓存整个组件
- 列表页首次加载后，把分页结果缓存到 Pinia，后续进入先展示缓存数据，再静默刷新最新项，避免重复请求也避免全量驻留
- 对用户行为敏感的数据（如未读消息数），用事件驱动更新，而不是靠缓存组件维持状态
