vue缓存实现原理

Vue 缓存实现原理

Vue 中的缓存主要通过 keep-alive 组件实现，用于缓存动态组件或路由组件，避免重复渲染和销毁，提升性能。

核心机制

keep-alive 是一个抽象组件，不会渲染成 DOM 元素，而是通过插槽（slot）管理子组件。其缓存机制基于以下关键点：

1. LRU 缓存策略
   keep-alive 使用 LRU（最近最少使用）算法管理缓存。当缓存数量超过 max 属性设置的值时，最久未使用的实例会被销毁。

2. 组件实例缓存
   被缓存的组件实例会存储在 cache 对象中，以组件的 name 或 tag 作为键，避免重复创建和销毁。

3. 生命周期钩子
   缓存组件会触发特定的生命周期钩子：

   

   • activated：组件被激活时调用（从缓存中重新插入 DOM）。
   • deactivated：组件被停用时调用（移出 DOM 但保留在缓存中）。

实现细节

1. 缓存标识
   通过组件的 name 或 tag 生成唯一标识，确保同一组件的多个实例能正确缓存。

   const key = vnode.key ?? vnode.type.name;

2. 缓存存储
   缓存的组件实例存储在 cache 对象中，并通过 keys 数组维护访问顺序。

   const cache = new Map();
   const keys = new Set();

3. 渲染逻辑

   

   • 首次渲染时，将组件实例存入 cache。
   • 再次渲染时，直接从 cache 中读取实例，避免重新创建。

   if (cachedVNode) {
     // 从缓存中恢复实例
     vnode.component = cachedVNode.component;
   }

4. LRU 更新
   每次访问缓存时，将对应的 key 移到 keys 数组末尾，确保最近使用的组件不被淘汰。

   keys.delete(key);
   keys.add(key);

使用示例

<template>
  <keep-alive :max="3">
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

注意事项

• 动态组件的 key 或 name 必须唯一，否则缓存可能失效。

• 缓存过多可能导致内存占用过高，需合理设置 max 属性。

• 嵌套路由需结合 router-view 使用：

  <keep-alive>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </keep-alive>