当前位置：首页 > VUE

vue keep alive 实现

2026-03-29 06:29:02VUE

Vue Keep-Alive 实现原理

Vue 的 keep-alive 是一个内置组件，用于缓存不活动的组件实例，避免重复渲染和销毁。其核心实现基于组件的生命周期钩子和虚拟 DOM 的缓存机制。

基本用法

在 Vue 模板中包裹需要缓存的动态组件或路由视图：

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

或配合路由使用：

<keep-alive>
  <router-view></router-view>
</keep-alive>

缓存机制

keep-alive 通过以下方式实现缓存：

LRU 缓存策略：默认缓存最近使用的组件实例，超出 max 限制时会销毁最久未使用的实例。
虚拟 DOM 比对：通过 key 标识缓存组件，相同 key 的组件会直接复用缓存实例。
生命周期管理：被缓存的组件会触发 activated 和 deactivated 钩子而非 destroyed。

核心属性

include：字符串或正则，匹配名称的组件会被缓存。
exclude：字符串或正则，匹配名称的组件不会被缓存。
max：数字，限制最大缓存实例数。

示例：

<keep-alive :include="['ComponentA']" :max="5">
  <router-view/>
</keep-alive>

实现自定义缓存

可通过 cache 属性扩展缓存策略：

const customCache = {
  get(key) { /* ... */ },
  set(key, vnode) { /* ... */ },
  delete(key) { /* ... */ }
};

<keep-alive :cache="customCache">
  <component :is="view"/>
</keep-alive>

注意事项

被缓存的组件需设置唯一 name 选项，否则 include/exclude 不生效。
嵌套路由需要每个层级单独配置 keep-alive。
频繁切换的缓存组件可能引发内存问题，需合理设置 max。

源码关键逻辑

Vue 内部通过 render 函数处理缓存：

vue keep alive 实现

render () {
  const vnode = getFirstComponentChild(this.$slots.default);
  const key = vnode.key;
  if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance;
  } else {
    cache[key] = vnode;
  }
  vnode.data.keepAlive = true;
  return vnode;
}

此实现确保了组件实例的复用而非重新创建。