Vue中keep-alive

掘金学习资料

Vue官网

<keep-live>是一个缓存组件的内置组件，目的是提升应用性能并保持组件状态。

1. 核心作用：

• 组件缓存：当组件被包裹在<keep-alive>中时，切换离开不会被销毁，而是保留在内存中，再次显示时，直接复用缓存的实例，避免重新创建和渲染。
• 状态保留：组件的当前状态（如数据，DOM状态）被保留，提升用户体验。

2. 使用场景

• 动态组件切换：如标签页、步骤向导等频繁切换但需保持状态的场景。
• 路由视图缓存：在SPA中缓存特定页面，避免重复加载数据。

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

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

3. 配置属性

• include：指定需要缓存的组件名称，值可以是一个以英文逗号分隔的字符串，一个正则表达式，或是包含这两种类型的一个数组。
• exclude:明确排除不缓存的组件，值可以是一个以英文逗号分隔的字符串，一个正则表达式，或是包含这两种类型的一个数组。
• max：限制最大缓存实例数（LRU 缓存）LRU 缓存

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

<keep-alive :max="5">
  <router-view></router-view>
</keep-alive>

4. 生命周期

• activated：组件被激活（再次显示）时触发。
• deactiveted：组件被停用（离开缓存）时触发。

5. 实现原理

• 缓存机制：内部维护一个缓存对象（cache）和一个键名数组（keys），通过组件的name或自定义key作为标识符。
• VNode处理：在渲染阶段，若组件匹配缓存条件，则从缓存中取出VNode,否则创建新实例并缓存。
• LRU淘汰策略：当缓存实例数超过max时，移除最久未使用的实例。

// 简化版核心逻辑
render() {
  const vnode = this.$slots.default[0];
  const key = vnode.key;
  if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance;
  } else {
    cache[key] = vnode;
    if (this.max && keys.length >= this.max) {
      pruneCacheEntry(cache, keys[0], keys);
    }
    keys.push(key);
  }
  vnode.data.keepAlive = true;
  return vnode;
}