探讨 Vue 3 源码中 `keep-alive` 组件的缓存策略 (`cache` `Set` 和 `keys` `Map`)，以及它如何影响被缓存组件的生命周期。

各位靓仔靓女，晚上好！我是你们今晚的导游，带大家一起探索 Vue 3 源码中 keep-alive 这个神奇的“冰箱”。今天的主题是：keep-alive 的缓存策略，包括 cache Set 和 keys Map，以及它如何影响被缓存组件的生命周期。

准备好了吗？让我们开始这场源码之旅！

一、keep-alive：组件界的“冰箱”

想象一下，你经常去一家餐厅点同样的菜，每次都要重新点餐、厨师重新烹饪，是不是很麻烦？keep-alive 就是 Vue 组件界的“冰箱”，它可以把不经常改变的组件“冻”起来，下次再用的时候直接“解冻”，省时省力。

简单来说，keep-alive 是一个抽象组件，它自身不会渲染任何 DOM 元素，而是根据 include 和 exclude 属性，有条件地缓存组件实例。

二、缓存的“冰箱”：cache 和 keys

keep-alive 的核心缓存机制依赖于两个数据结构：

cache: Map<VNodeKey, VNode>: 这是一个 Map 对象，用于存储缓存的 VNode (Virtual Node)。Key 是 VNode 的 key 属性，Value 是 VNode 本身。VNode 可以理解为组件的虚拟 DOM 描述，包含组件类型、属性、子节点等信息。
keys: Set<VNodeKey>: 这是一个 Set 对象，用于存储缓存的 VNode 的 key。它的作用是维护缓存的顺序，方便实现 LRU (Least Recently Used) 缓存策略。

我们可以把 cache 想象成冰箱里的一个个储物盒，每个储物盒里放着一个组件的“快照” (VNode)。keys 就像一个记录冰箱里储物盒顺序的清单，方便我们知道哪个储物盒里的东西是最久没用的。

三、keep-alive 的工作流程

keep-alive 的工作流程可以概括为以下几个步骤：

判断是否需要缓存： 首先，keep-alive 会根据 include 和 exclude 属性判断当前组件是否需要缓存。include 允许缓存的组件名（字符串或正则），exclude 禁止缓存的组件名（字符串或正则）。如果既没有 include 也没有 exclude，则默认缓存所有组件。

const name = c.type.name || c.type.__name;
const { include, exclude } = props;

if (
  include &&
  (!name || !matches(include, name))
) {
  return c; // 不缓存，直接返回 VNode
}
if (
  exclude &&
  name &&
  matches(exclude, name)
) {
  return c; // 不缓存，直接返回 VNode
}

matches 函数用于判断组件名是否符合 include 或 exclude 的规则。

function matches(pattern: string | RegExp | (string | RegExp)[], name: string): boolean {
  if (isArray(pattern)) {
    return pattern.some((p) => matches(p, name));
  } else if (isString(pattern)) {
    return pattern.split(',').indexOf(name) > -1;
  } else if (isRegExp(pattern)) {
    return pattern.test(name);
  }
  /* istanbul ignore next */
  return false;
}

缓存 VNode： 如果需要缓存，keep-alive 会检查 cache 中是否已经存在该 VNode。
- 如果存在： 从 cache 中取出 VNode，并更新 keys 中该 VNode 的顺序，将其移到最后（表示最近使用过）。
```
// hit
vnode.component!.ctx!.$keepAlive = true
// make this key freshest
keys.delete(key)
keys.add(key)
```
- 如果不存在： 将 VNode 存储到 cache 中，并将 key 添加到 keys 中。
```
cache.set(key, vnode)
keys.add(key)
```
缓存数量控制： keep-alive 还可以通过 max 属性限制缓存的组件数量。如果缓存数量超过 max，则会移除最久未使用的组件。
```
if (max && keys.size > parseInt(max as string, 10)) {
    pruneCacheEntry(cache.get(keys.value)!)
    cache.delete(keys.value)
    keys.delete(keys.value)
}
```
pruneCacheEntry 函数用于移除缓存的 VNode，并触发组件的 deactivated 生命周期钩子。
返回 VNode： 最终，keep-alive 返回缓存的 VNode，或者未缓存的原始 VNode。

四、缓存策略：LRU (Least Recently Used)

keep-alive 使用 LRU 缓存策略来决定移除哪些组件。LRU 的核心思想是：最近使用的组件更有可能在未来被再次使用，而最久未使用的组件则可以被安全地移除。

keys 这个 Set 对象在 LRU 策略中起着关键作用。每次访问或缓存一个 VNode，keep-alive 都会更新 keys 中该 VNode 的顺序，将其移到最后。这样，keys 中第一个元素就是最久未使用的 VNode 的 key。

五、keep-alive 对组件生命周期的影响

keep-alive 会影响被缓存组件的生命周期。当组件被缓存时，它的 activated 和 deactivated 钩子会被触发。

activated： 当组件被激活（从缓存中取出并重新渲染）时，activated 钩子会被调用。
deactivated： 当组件被停用（被缓存）时，deactivated 钩子会被调用。

与 mounted 和 unmounted 不同，activated 和 deactivated 不会每次都执行。它们只在组件在缓存和非缓存状态之间切换时才会执行。

我们可以用一个表格来总结这些生命周期钩子的执行时机：

生命周期钩子	执行时机
`mounted`	组件首次挂载到 DOM 时
`unmounted`	组件从 DOM 中移除时
`activated`	组件从缓存中激活时
`deactivated`	组件被缓存时

代码示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {
    console.log('Component mounted');
  },
  unmounted() {
    console.log('Component unmounted');
  },
  activated() {
    console.log('Component activated');
  },
  deactivated() {
    console.log('Component deactivated');
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

如果在 App.vue 中使用 keep-alive 包裹这个组件：

<template>
  <div>
    <keep-alive>
      <MyComponent />
    </keep-alive>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      showComponent: true
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    }
  }
};
</script>

你会发现，只有在第一次挂载和移除组件时，mounted 和 unmounted 才会执行。而每次切换组件的显示与隐藏时，activated 和 deactivated 会交替执行。

六、源码解读：关键片段

下面我们深入源码，看看 keep-alive 的核心逻辑是如何实现的。

首先是 render 函数：

const KeepAliveImpl = {
  name: 'KeepAlive',
  // ... 其他选项

  setup(props: KeepAliveProps, { slots }: SetupContext) {
    const instance = getCurrentInstance()!;
    // 组件实例

    // ... 获取缓存相关的数据结构：cache, keys, pruneCacheEntry

    const cacheSubtree = () => {
      // ... 缓存 VNode 的逻辑
    }

    onDeactivated(() => {
      cacheSubtree() // 组件失活时，缓存 VNode
    })

    onUnmounted(() => {
      // ... 组件卸载时，清空缓存
    })

    return () => {
      if (!slots.default) {
        return null
      }

      const children = slots.default()
      const vnode = children[0]
      // 获取第一个子 VNode

      if (children.length > 1 || !isObject(vnode)) {
        return children
      }
      // 如果有多个子节点或者不是 VNode，直接渲染

      const comp = vnode.type as Component
      // 获取组件类型

      const name = getName(comp)
      // 获取组件名称

      if (name && !include(props, name) || exclude(props, name)) {
        return vnode
      }
      // 如果组件不在 include 列表中或者在 exclude 列表中，直接渲染

      const { cache, keys } = instance
      const key =
        vnode.key == null
          ? comp
          : vnode.key
      // 生成缓存 Key

      const cachedVNode = cache.get(key)
      // 尝试从缓存中获取 VNode

      if (vnode.el) {
        // this vnode was re-used in the patch and kept alive.
        // make sure its mounted hook is invoked.
        vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
      } else {
        vnode.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE
      }
      // 设置 ShapeFlags，用于优化渲染

      if (cachedVNode) {
        // hit
        vnode.component!.ctx!.$keepAlive = true
        // make this key freshest
        keys.delete(key)
        keys.add(key)
        // 更新 keys 中的顺序

        // copy over mounted state
        vnode.el = cachedVNode.el
        vnode.component = cachedVNode.component
        vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
      } else {
        // not a hit
        cache.set(key, vnode)
        keys.add(key)
        // 缓存 VNode

        if (max && keys.size > parseInt(max as string, 10)) {
          pruneCacheEntry(cache.get(keys.value)!)
          cache.delete(keys.value)
          keys.delete(keys.value)
        }
        // 如果缓存数量超过 max，移除最久未使用的组件
      }

      vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
      return vnode
    }
  }
}

这段代码的核心逻辑是：

获取 keep-alive 包裹的第一个子 VNode。
根据 include 和 exclude 属性判断是否需要缓存该 VNode。
如果需要缓存，则从 cache 中查找该 VNode。
如果找到，则更新 keys 中的顺序，并复制缓存的 VNode 的相关属性。
如果没有找到，则将 VNode 缓存到 cache 中，并添加到 keys 中。
如果缓存数量超过 max，则移除最久未使用的组件。
最后，返回 VNode。

七、总结

keep-alive 通过 cache Map 和 keys Set 实现了高效的组件缓存策略，它不仅可以提高应用的性能，还可以减少不必要的组件渲染。理解 keep-alive 的工作原理，可以帮助我们更好地优化 Vue 应用，提升用户体验。

希望今天的讲解对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复