Vue 的 keep-alive 通过内存保活组件实例实现高效缓存，核心是保留响应式数据、vnode 和 DOM 引用；支持 include/exclude 白名单/黑名单匹配及 LRU 淘汰策略，并提供 onActivated/onDeactivated 钩子同步状态。
缓存的核心是实例，不是 DOM
Vue 在组件被
- 把整个组件实例（包括响应式数据、计算属性、方法、内部状态）完整保留在内存中
- 保留其已生成的虚拟节点（vnode）和真实 DOM 引用
- 将该实例存入一个 Map 缓存池，键通常是组件 name 或 key，值是 vnode
这样下次激活时，Vue 直接复用这个实例，跳过 setup、created、mounted 等初始化阶段，渲染也基于已有 vnode 快速 patch。
精准控制哪些组件进缓存池
靠 include 和 exclude 两个 props 实现白名单/黑名单逻辑：
- 组件必须声明
name选项（或通过key显式指定），否则无法匹配 -
include支持字符串（如"UserDetail"）、正则（/Detail$/）、数组（["Home", "Profile"]） -
exclude优先级高于include，一旦命中就直接绕过缓存 - 两者都未设置时，默认缓存所有子组件
限制缓存数量，避免内存泄漏
max 属性启用 LRU（最近最少使用）淘汰策略：
- 内部维护一个 keys 数组，按访问顺序记录缓存项
- 当新组件加入且总数超限，自动移除数组开头（最久未用）的缓存项
- 移除时会触发组件的
unmounted钩子，释放资源（如定时器、事件监听）
配合生命周期钩子做状态同步
缓存让组件“不死”，但也带来状态陈旧风险：
-
onActivated：组件从缓存中恢复时触发，适合重新拉取最新数据、重置局部 UI 状态 -
onDeactivated：组件进入缓存前触发，适合清理副作用（清除定时器、暂停视频、保存草稿）
比如商品详情页切换回来时，在 onActivated 中检查当前 ID 是否变化，必要时 refetch；在 onDeactivated 中暂停轮播图自动播放。
不复杂但容易忽略
