keep-alive原理

export default {
  name: 'keep-alive',
  abstract: true,   // 判断当前组件虚拟dom是否渲染成真实dom的关键

  props: {  // 三个参数
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },

  created () {
    this.cache = Object.create(null)    // 用来缓存组件的对象(缓存的是虚拟dom)
    this.keys = []  // 缓存的组件的键
    /* 
    this.cache = {
        'key1':'组件1',
        'key2':'组件2',
        // ...
    }
    this.keys = [key1, key2, ...]
     */
  },

  destroyed () {    // keep alive组件被销毁时调用
    for (const key in this.cache) { // 遍历所有被缓存的组件
      pruneCacheEntry(this.cache, key, this.keys)   // 删除除了当前被渲染的组件外的所有组件缓存
      /* 
        function pruneCacheEntry (
            cache: VNodeCache,
            key: string,
            keys: Array<string>,
            current?: VNode // 当前组件
            ) {
            const cached = cache[key]
            /* 判断当前没有处于被渲染状态的组件，将其销毁*/
            if (cached && (!current || cached.tag !== current.tag)) {
                cached.componentInstance.$destroy() // 缓存组件实例调用销毁钩子
            }
            cache[key] = null   // 删除对应cache对象
            remove(keys, key)   // 删除对应键
        }
       */
    }
  },

  mounted () {
    //   监听两个参数变化,发生变化时删除对应需要删除的缓存
    this.$watch('include', val => { // 监听include变化
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {  // 监听exclude变化
      pruneCache(this, name => !matches(val, name))
    })
    /* 
    function pruneCache (keepAliveInstance, filter) {
        const { cache, keys, _vnode } = keepAliveInstance   // keep alive实例
        for (const key in cache) {  // 遍历缓存组件
            const cachedNode = cache[key]
            if (cachedNode) {
                const name = getComponentName(cachedNode.componentOptions)
                if (name && !filter(name)) {    // 过滤出需要删除的缓存组件
                    pruneCacheEntry(cache, key, keys, _vnode)   // 删除
                }
            }
        }
    }
     */
  },

  render() {
    /* 获取默认插槽中的第一个组件节点 */
    const slot = this.$slots.default    // keep alive只渲染第一个*组件*节点
    /* 
        <keep-alive>    只渲染第一个组件,即组件一;当组件一销毁后会会渲染111,再展示组件一时,111消失
            <p>111</p>
            <Comp v-if="flag">组件一</Comp>
            <Comp v-if="flag">组件二</Comp>
            <p>222</p>
        </keep-alive>
     */
    const vnode = getFirstComponentChild(slot)  // 当前组件虚拟dom
    /* 获取该组件节点的componentOptions */
    const componentOptions = vnode && vnode.componentOptions    // 当前组件节点配置项,包括name,tag等

    if (componentOptions) {
      /* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */
      const name = getComponentName(componentOptions)

      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode    // 
      }

      const { cache, keys } = this
      const key = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}