Vue3 的 KeepAlive 组件实现原理

一、KeepAlive 的作用与基本概念
KeepAlive 是 Vue3 内置的抽象组件，用于缓存不活动的组件实例而非销毁它们。当组件在 KeepAlive 内部切换时，它的激活和失活生命周期会被触发，而不会重新创建和销毁。这能显著提升频繁切换组件的性能表现。

二、实现机制的核心要素

1. 缓存存储结构

   const cache = new Map() // 用于存储组件实例
   const keys = new Set()  // 用于记录缓存键的顺序
   

   • 使用 Map 存储键（组件唯一标识）与组件实例的映射
   • 使用 Set 记录键的访问顺序，用于实现 LRU（最近最少使用）淘汰策略

2. 组件实例的特殊处理

   • 被缓存的组件实例会添加内部标记（__isKeepAlive: true）
   • 实例不会被正常卸载，而是通过特殊方法（shapeFlag.deactivated）标记为失活状态

三、完整的缓存生命周期流程

1. 组件挂载阶段

   • 检查缓存中是否存在对应 key 的实例
   • 若存在：直接复用实例，将其从原位置移到最新位置（标记为最近使用）
   • 若不存在：创建新实例并存入缓存，同时记录 key 到 keys 集合

2. 组件切换阶段

   • 当前活跃实例执行 deactivated 生命周期
   • 新实例执行 activated 生命周期（如果是缓存的）
   • 通过 Vue 的渲染器内部方法（move）将组件 DOM 移动到正确容器

3. 缓存淘汰策略（LRU 实现）

   function pruneCacheEntry(key) {
     const cached = cache.get(key)
     if (cached) {
       // 执行组件卸载流程但保留 DOM 引用
       unmount(cached.component)
       cache.delete(key)
       keys.delete(key)
     }
   }
   

   • 当缓存数量超过 max 设置时，淘汰最久未使用的 key（keys 集合的第一个元素）

四、特殊的生命周期钩子

1. onActivated

   • 当被缓存的组件重新显示时触发
   • 执行顺序：mounted → deactivated → activated

2. onDeactivated

   • 当被缓存的组件被隐藏时触发
   • 注意：此时组件仍保持内存中的状态，只是从 DOM 中移除

五、DOM 操作的特殊处理

• 被缓存的组件在失活时，其 DOM 元素通过 document.createElement('div') 作为临时容器存储
• 重新激活时，DOM 元素从临时容器移回实际渲染位置
• 这避免了重复创建 DOM 元素带来的性能开销

六、与 Vue Router 的集成原理

// 路由组件自动获得基于路由路径的缓存 key
<RouterView v-slot="{ Component }">
  <KeepAlive>
    <component :is="Component" :key="$route.path" />
  </KeepAlive>
</RouterView>

• 通过动态组件和 key 的配合，确保同一路由路径的组件被正确缓存
• 不同路由的组件会创建不同的缓存实例

七、源码层面的关键实现技巧

1. 使用 Symbol 标记缓存组件的内部状态
2. 通过渲染器的内部方法直接操作组件子树
3. 利用 JS 的 WeakMap 避免内存泄漏
4. 通过位运算快速判断组件状态（activated/deactivated）

这种设计实现了组件状态的持久化缓存，同时通过 LRU 策略有效控制内存使用，是性能优化与资源管理的经典平衡方案。