Vue源码阅读（35）：keep-alive 组件的源码解析

我的开源库：

• fly-barrage 前端弹幕库，项目官网：https://fly-barrage.netlify.app/，可实现类似于 B 站的弹幕效果，并提供了完整的 DEMO，Gitee 推荐项目；
• fly-gesture-unlock 手势解锁库，项目官网：https://fly-gesture-unlock.netlify.app/，在线体验：https://fly-gesture-unlock-online.netlify.app/，可高度自定义锚点的数量、样式以及尺寸；

keep-alive 组件的官方文档点击这里。

1，keep-alive 组件的实现原理

首先说清楚 keep-alive 组件的实现原理，然后再解析 keep-alive 组件的源码。

1-1，keep-alive 组件与插槽

keep-alive 组件的实现与插槽有一定的关系，插槽的解析可以看我的这篇文章。

keep-alive 组件能够缓存子组件的状态，使用代码如下所示：

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

在上面的代码中，keep-alive 组件和子组件呈一种插槽的关系，keep-alive 组件实例的 $slots 属性会保存子组件的 vnode，因此在 keep-alive 组件的 render 函数中，可以通过 this.$slots.default 获取当前子节点的 vnode。

1-2，keep-alive 组件缓存了子组件什么东西？如何缓存的？

问题1的答案：缓存了子组件的 Vue 实例和子组件上次渲染的真实DOM。

问题2的答案：在 keep-alive 组件的 Vue 实例中有一个 cache 属性，该属性是一个对象，这个对象用来缓存子组件的 vnode，vnode 有个 componentInstance 属性，这个 componentInstance 属性就是缓存的 Vue 实例，在 componentInstance 属性中有个 $el 属性，这个 $el 属性是缓存的真实 DOM。

1-3，keep-alive 是如何实现功能的？

keep-alive 组件实现功能的重点在其 render 函数中，render 函数会返回已经处理好的缓存的子组件 vnode，以此实现 keep-alive 组件的功能。

这里的处理是指返回 vnode 的 componentInstance 属性指向缓存 vnode 的 componentInstance 属性。通过上文可知，缓存 vnode 的 componentInstance 属性和componentInstance 属性中的 $el 属性是 keep-alive 实现组件缓存功能的重点，通过这种处理，返回的 vnode 中就保存着这两个重要的数据。在接下来的处理逻辑中，只要将 $el (真实 DOM) 重新渲染到页面上，就可以实现子组件 DOM 的复原了，由于之前的 Vue 实例已经赋值给 vnode.componentInstance，所以子组件的 Vue 实例也已经复原。至此，keep-alive 组件的功能也就实现了。

2，接下来开始源码的解析

keep-alive 组件定义在 src/core/components/keep-alive.js 文件中，代码量并不多，加上第一小节原理的讲解，很容易理解，源码如下所示，解析都在注释中。

export default {
  name: 'keep-alive',
  // keep-alive 是一个抽象组件，抽象组件不会渲染成 DOM 元素，也不会出现在父组件链中
  abstract: true,

  props: {
    // 缓存白名单
    // 字符串或正则表达式。只有名称匹配的组件会被缓存。
    include: patternTypes,
    // 缓存黑名单
    // 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    exclude: patternTypes,
    // 数字。最多可以缓存多少组件实例。
    max: [String, Number]
  },

  created () {
    // 用于缓存 vnode 的对象
    this.cache = Object.create(null)
    // 已缓存的 vnode 的 key 集合
    this.keys = []
  },

  destroyed () {
    // 清空所有缓存的 vnode
    // 使用 for in 遍历 this.cache 对象
    for (const key in this.cache) {
      // 借助 pruneCacheEntry 方法移除缓存的 vnode
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  // 这里借助 watch 监控 include prop 和 exclude prop
  // 如果这两个 prop 有变化的话，则按照最新的 include 和 exclude 更新 this.cache
  // 将不满足 include、exclude 限制的 缓存vnode 从 this.cache 中移除
  watch: {
    include (val: string | RegExp | Array<string>) {
      pruneCache(this, name => matches(val, name))
    },
    exclude (val: string | RegExp | Array<string>) {
      pruneCache(this, name => !matches(val, name))
    }
  },

  // 组件重新渲染时，会执行 render 函数获取对应的 vnode，在这里，keep-alive 通过返回指定的 vnode 实现其本身的功能
  //
  // 实现 keep-alive 的功能有两个要点：(1)缓存组件的 Vue 实例；(2)缓存组件上次渲染的真实 DOM；
  // keep-alive 会在 cache 对象中缓存子组件的 vnode，vnode 有个 componentInstance 属性，
  // 这个 componentInstance 属性就是缓存的 Vue 实例，在 componentInstance 属性中有个 $el 属性，
  // 这个 $el 属性是缓存的真实 DOM
  //
  // 当 keep-alive 的子组件是已经渲染过一次的组件时，通过还原缓存的 Vue 实例和缓存的真实 DOM，
  // 实现 keep-alive 组件的功能
  render () {
    // 获取 keep-alive 组件子节点中的第一个组件 vnode
    const vnode: VNode = getFirstComponentChild(this.$slots.default)
    // 获取组件的配置选项对象
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // 获取组件的名称
      const name: ?string = getComponentName(componentOptions)
      // 如果当前的组件 name 不在 include 中或者组件的 name 在 exclude 中
      // 说明当前的组件是不被 keep-alive 所缓存的，此时直接 return vnode 即可
      if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
      )) {
        return vnode
      }
      // 代码执行到这里，说明当前的组件受 keep-alive 组件的缓存

      const { cache, keys } = this
      // 定义 vnode 缓存用的 key
      const key: ?string = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key

      // 如果 cache[key] 已经存在的话，则说明当前的组件 vnode 已经被缓存过了,此时需要将其恢复还原出来
      if (cache[key]) {
        // 将缓存的 Vue 实例赋值给 vnode.componentInstance
        vnode.componentInstance = cache[key].componentInstance
        // 先从 keys 中移除 key，然后再 push key，这可以保证当前的 key 在 keys 数组中的最后面
        remove(keys, key)
        keys.push(key)
      } else {
        // 如果 cache[key] 不存在的话，说明当前的子组件是第一次出现，此时需要将 vnode 缓存到 cache 中
        cache[key] = vnode
        // 将 key 存储到 keys 字符串数组中
        keys.push(key)
        // 接下来的代码是 max prop 功能的实现。
        // 如果用户定义了 max prop，并且当前缓存的 vnode 的数量大于 max 的话，
        // 将 cache 对象中缓存时间最久没被使用（[keys[0]]）的 vnode 移除掉
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      // 将 vnode.data.keepAlive 属性设置为 true，这对 vnode 有一个标识的作用，标识这个
      // vnode 是 keep-alive 组件的 render 函数 return 出去的，这个标识在下面的运行代码中有用
      vnode.data.keepAlive = true
    }
    return vnode
  }
}

// 用于移除 cache 中不满足 filter 条件的 vnode
function pruneCache (keepAliveInstance: any, filter: Function) {
  const { cache, keys, _vnode } = keepAliveInstance
  // 遍历 cache 对象中已经缓存的 vnode
  for (const key in cache) {
    // 获取当前遍历的 vnode
    const cachedNode: ?VNode = cache[key]
    // 如果当前遍历的 vnode 不是 null 的话
    if (cachedNode) {
      // 获取当前遍历 vnode 对应的组件名称
      const name: ?string = getComponentName(cachedNode.componentOptions)
      // 如果组件名称不满足 filter 条件的话，则调用 pruneCacheEntry 方法将当前遍历的 vnode 移除
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

// 该方法用于移除 cache 中缓存的指定 vnode，并销毁 vnode 对应的组件实例
function pruneCacheEntry (
  // 用于缓存 vnode 的对象
  cache: VNodeCache,
  // 当前要移除 vnode 的 key
  key: string,
  // 已缓存 vnode 的 key 集合
  keys: Array<string>,
  // keep-alive 内当前渲染组件的 vnode
  current?: VNode
) {
  // 使用 key 从 cache 中获取缓存的指定 vnode
  const cached = cache[key]
  if (cached && cached !== current) {
    // 触发执行 vnode 对应组件实例的 $destroy 方法
    cached.componentInstance.$destroy()
  }
  // 将 cache 对象中的 key 置为 null，删除缓存的 vnode
  cache[key] = null
  // 从 key 集合数组中移除 key
  remove(keys, key)
}