<keep-alive> 是 Vue 提供的抽象组件,专门用于缓存不活动的组件实例,避免组件反复创建 / 销毁,提升页面性能,它的缓存策略有明确的规则和优先级。
一、核心缓存原则
缓存组件实例,不会执行 destroyed 销毁,而是将组件实例存入内存;再次激活时,直接从内存取出复用。
默认缓存所有被包裹的组件,不配置任何属性时,<keep-alive> 会缓存它内部所有切换过的组件。
缓存是有状态的,组件的 data 数据、表单输入、滚动位置等状态会被完整保留。
生命周期专属钩子,缓存组件激活 / 失活时,触发专属生命周期:
-
激活:
activated -
失活:
deactivated常规生命周期:
created/mounted仅首次执行,destroyed永远不执行。
二、精准缓存策略(三大属性)
通过 include / exclude / max 控制缓存范围和数量,优先级:exclude > include。
max遵循LRU淘汰策略
设置 max 后,缓存池满时,淘汰「最近最少使用」的组件:
- 新组件进入缓存 → 数量超过
max - 删除最久没有被访问的缓存实例
- 保证缓存始终保留高频使用的组件