发布于 由admin

剖析 Vue 3 源码中 `keep-alive` 组件的缓存策略，它如何通过 `Map` 存储被缓存组件的 VNode 和实例，并在重新激活时进行复用？

各位老铁，大家好！我是你们的老朋友，今天咱们来聊聊Vue 3源码里那个神秘又强大的keep-alive组件。这玩意儿啊，说白了就是个组件缓存器，能让你的组件在切换的时候不销毁，保留住它的状态，再次显示的时候直接拿出来用，速度嗖嗖的。

咱们今天就来扒一扒keep-alive的缓存策略，看看它到底是怎么通过Map这个数据结构来存储被缓存的VNode和实例，并在重新激活时进行复用的。准备好了吗？坐稳扶好，发车啦！

一、keep-alive：一个有故事的组件

在Vue的世界里，组件就像一个个积木，我们可以随意拼装组合。但是，有些时候，我们希望某些组件在切换的时候不要被销毁，而是保留住它们的状态，下次再显示的时候直接拿出来用。比如，一个列表页，用户滚动到了某个位置，切换到详情页再回来，我们希望列表页还是停留在原来的位置，而不是重新加载。

这个时候，keep-alive就派上用场了。它就像一个组件的“保温箱”，能把组件“冻结”起来，等到需要的时候再“解冻”。

二、缓存策略的核心：Map

keep-alive的缓存策略的核心就是一个Map对象。这个Map的key是被缓存组件的name，value是对应的VNode。

//packages/runtime-core/src/components/KeepAlive.ts

const KeepAliveImpl = {
  setup(props: KeepAliveProps, { slots }: SetupContext) {
    // ...省略其他代码

    const cache: CacheMap = new Map()
    const keys: KeysType = new Set()

    // ...省略其他代码
  }
}

这里，CacheMap和KeysType的定义如下：

type CacheMap = Map<string | number | symbol, VNode>
type KeysType = Set<string | number | symbol>

可以看到，cache就是我们用来存储缓存组件VNode的Map，而keys则用来记录缓存组件的key，方便我们进行LRU（Least Recently Used）淘汰策略。

三、pruneCacheEntry：缓存淘汰策略

既然是缓存，就不能无限地存储组件。keep-alive组件通过max属性来限制缓存组件的数量。当缓存的组件数量超过max时，就需要进行缓存淘汰。

keep-alive组件使用的缓存淘汰策略是LRU（Least Recently Used），也就是最近最少使用算法。简单来说，就是把最久没有被使用的组件从缓存中移除。

pruneCacheEntry函数就是用来执行缓存淘汰的。它的代码如下：

//packages/runtime-core/src/components/KeepAlive.ts

function pruneCacheEntry(
    cache: CacheMap,
    keys: KeysType,
    vnode: VNode | undefined
  ) {
    if (!vnode) {
      return
    }
    const { shapeFlag, component } = vnode
    if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
      // with lifecycle
      cleanupComponent(component!)
    }

    cache.delete(vnode.key!)
    keys.delete(vnode.key!)
  }

这个函数的作用是：

  1. 如果VNode存在，则判断它是否是一个有状态组件（STATEFUL_COMPONENT）。
  2. 如果是，则调用cleanupComponent函数来清理组件的生命周期钩子。
  3. 从cache中删除对应的VNode。
  4. 从keys中删除对应的key。

四、cacheVNode：缓存VNode

当组件需要被缓存时，cacheVNode函数会被调用。它的代码如下：

//packages/runtime-core/src/components/KeepAlive.ts

const cacheVNode = () => {
      // ...省略其他代码

      // prune oldest entry
      if (cache.size > max) {
        pruneCacheEntry(cache, keys, cachedVNodeToEvict)
      }

      cache.set(vnode.key!, vnode)
      keys.add(vnode.key!)
}

这个函数的作用是：

  1. 如果缓存已满（cache.size > max），则调用pruneCacheEntry函数来淘汰最久没有被使用的组件。
  2. 将VNode存储到cache中，key为VNode的key属性。
  3. 将VNode的key添加到keys中。

五、unmount：组件卸载时的处理

当keep-alive组件被卸载时，需要对缓存的组件进行清理。unmount钩子函数就是用来处理这个逻辑的。

//packages/runtime-core/src/components/KeepAlive.ts

  unmounted() {
    cache.forEach(cached => {
      const { shapeFlag, component } = cached
      if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
        cleanupComponent(component!)
      }
    })
  },

这个函数的作用是遍历cache中的所有VNode，如果VNode是一个有状态组件，则调用cleanupComponent函数来清理组件的生命周期钩子。

六、cleanupComponent：清理组件生命周期钩子

cleanupComponent函数的作用是清理组件的生命周期钩子。它的代码如下：

//packages/runtime-core/src/components/KeepAlive.ts

function cleanupComponent(component: ComponentInternalInstance) {
  setActiveInstance(component)
  const { emitsOptions, propsOptions: [propsOptions] } = component.type
  if (component.vnode.shapeFlag & ShapeFlags.TELEPORT) {
    // teleport contains lifecycle unmount
    return
  }
  //执行卸载的生命周期
  callHook(component.um, component.parent)
  setActiveInstance(component.parent)
}

这个函数的作用是：

  1. 设置当前激活的组件实例为要清理的组件实例。
  2. 执行组件的unmounted生命周期钩子。
  3. 设置当前激活的组件实例为父组件实例。

七、patch：重新激活组件

当一个被缓存的组件需要重新显示时，patch函数会被调用。patch函数会从cache中取出对应的VNode，并将其渲染到页面上。

在patch函数中，有一个判断逻辑：

//packages/runtime-core/src/renderer.ts

const patch: PatchFn = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null = null,
  parentComponent: ComponentInternalInstance | null = null,
  parentSuspense: SuspenseBoundary | null = null,
  isSVG: boolean = false,
  optimized: boolean = false,
  internals: RendererInternals<RendererNode, RendererElement> = EMPTY_OBJ
) => {
  // ...省略其他代码

  if (n1 && !isSameVNodeType(n1, n2)) {
    // ...省略其他代码
  }

  const { type, shapeFlag } = n2

  switch (type) {
    // ...省略其他代码

    default:
      if (shapeFlag & ShapeFlags.COMPONENT) {
        processComponent(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        processTeleport(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      } else if (__FEATURE_SUSPENSION__ && shapeFlag & ShapeFlags.SUSPENSE) {
        processSuspense(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      } else {
        processElement(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      }
  }
}

如果新的VNode的类型是一个组件（shapeFlag & ShapeFlags.COMPONENT），则调用processComponent函数来处理。

processComponent函数会判断新的VNode是否是一个被缓存的组件。如果是，则从cache中取出对应的VNode，并将其渲染到页面上。

//packages/runtime-core/src/renderer.ts

const processComponent = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null = null,
  parentComponent: ComponentInternalInstance | null = null,
  parentSuspense: SuspenseBoundary | null = null,
  isSVG: boolean = false,
  optimized: boolean = false,
  internals: RendererInternals<RendererNode, RendererElement> = EMPTY_OBJ
) => {
  if (n1 == null) {
    // 初始化组件
    mountComponent(
      n2,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized,
      internals
    )
  } else {
    // 更新组件
    updateComponent(n1, n2, container, isSVG, optimized, internals)
  }
}

updateComponent函数会判断新的VNode和旧的VNode是否是同一个组件。如果是，则调用patch函数来更新组件。如果不是，则需要卸载旧的组件，并挂载新的组件。

八、总结

keep-alive组件的缓存策略的核心就是一个Map对象，用来存储被缓存组件的VNode。当组件需要被缓存时，cacheVNode函数会被调用，将VNode存储到Map中。当缓存的组件数量超过max时，pruneCacheEntry函数会被调用，淘汰最久没有被使用的组件。当组件需要重新显示时，patch函数会从Map中取出对应的VNode，并将其渲染到页面上。

为了更清晰的了解keep-alive的整个工作流程，我们用表格来总结一下：

步骤 函数 作用
1 setup 初始化cache和keys
2 cacheVNode 将VNode存储到cache中
3 pruneCacheEntry 淘汰最久没有被使用的组件
4 unmounted 清理组件的生命周期钩子
5 patch 重新激活组件
6 cleanupComponent 清理组件的生命周期钩子

九、代码示例

为了更好地理解keep-alive的缓存策略，我们来看一个简单的代码示例：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';

const ComponentA = defineComponent({
  template: '<div>Component A: {{ count }} <button @click="increment">Increment</button></div>',
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  name: 'ComponentA' // 必须设置name
});

const ComponentB = defineComponent({
  template: '<div>Component B: {{ message }}</div>',
  data() {
    return {
      message: 'Hello from Component B',
    };
  },
  name: 'ComponentB' // 必须设置name
});

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  setup() {
    const currentComponent = ref(ComponentA);

    const toggleComponent = () => {
      currentComponent.value = currentComponent.value === ComponentA ? ComponentB : ComponentA;
    };

    return {
      currentComponent,
      toggleComponent,
    };
  },
};
</script>

在这个示例中，我们定义了两个组件ComponentA和ComponentB。通过keep-alive组件，我们可以缓存这两个组件的状态。当我们切换组件时，组件的状态不会被销毁，而是保留在缓存中。

十、include和exclude属性

keep-alive组件还提供了include和exclude属性，用来指定哪些组件需要被缓存，哪些组件不需要被缓存。

  • include：只有匹配include的组件会被缓存。
  • exclude：匹配exclude的组件不会被缓存。

这两个属性的值可以是字符串、正则表达式或数组。

例如，如果我们只想缓存ComponentA，可以这样写：

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

如果我们想排除ComponentB，可以这样写：

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

十一、max属性

keep-alive组件还提供了max属性，用来限制缓存组件的数量。当缓存的组件数量超过max时，最久没有被使用的组件会被淘汰。

例如，如果我们只想缓存3个组件，可以这样写：

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

十二、总结的总结

好了，各位老铁，今天咱们就聊到这里。希望通过今天的讲解，大家对Vue 3源码中keep-alive组件的缓存策略有了更深入的理解。记住，Map是核心，LRU是策略，include、exclude和max是配置。掌握了这些，你就可以在Vue的世界里自由驰骋啦！

下次有机会，咱们再聊聊Vue 3源码的其他有趣的地方。拜拜！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注