keep-alive 缓存策略

4 阅读1分钟

<keep-alive> 是 Vue 提供的抽象组件,专门用于缓存不活动的组件实例,避免组件反复创建 / 销毁,提升页面性能,它的缓存策略有明确的规则和优先级。

一、核心缓存原则

缓存组件实例,不会执行 destroyed 销毁,而是将组件实例存入内存;再次激活时,直接从内存取出复用。

默认缓存所有被包裹的组件,不配置任何属性时,<keep-alive> 会缓存它内部所有切换过的组件。

缓存是有状态的,组件的 data 数据、表单输入、滚动位置等状态会被完整保留。

生命周期专属钩子,缓存组件激活 / 失活时,触发专属生命周期:

  • 激活:activated

  • 失活:deactivated

    常规生命周期:created/mounted 仅首次执行,destroyed 永远不执行。

二、精准缓存策略(三大属性)

通过 include / exclude / max 控制缓存范围和数量,优先级:exclude > include

max遵循LRU淘汰策略 设置 max 后,缓存池满时,淘汰「最近最少使用」的组件:

  • 新组件进入缓存 → 数量超过 max
  • 删除最久没有被访问的缓存实例
  • 保证缓存始终保留高频使用的组件