keep-alive 的实现原理和使用方法

export default {

  name: "keep-alive",

  abstract: true, // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中

  props: {

    include: patternTypes, // 被缓存组件

    exclude: patternTypes, // 不被缓存组件

    max: [String, Number] // 指定缓存大小

  },

 

  created() {

    this.cache = Object.create(null); // 缓存

    this.keys = []; // 缓存的VNode的键

  },

 

  destroyed() {

    for (const key in this.cache) {

      // 删除所有缓存

      pruneCacheEntry(this.cache, key, this.keys);

    }

  },

 

  mounted() {

    // 监听缓存/不缓存组件

    this.$watch("include", val => {

      pruneCache(this, name => matches(val, name));

    });

    this.$watch("exclude", val => {

      pruneCache(this, name => !matches(val, name));

    });

  },

 

  render() {

    // 获取第一个子元素的 vnode

    const slot = this.$slots.default;

    const vnode: VNode = getFirstComponentChild(slot);

    const componentOptions: ?VNodeComponentOptions =

      vnode && vnode.componentOptions;

    if (componentOptions) {

      // name不在inlcude中或者在exlude中 直接返回vnode

      // check pattern

      const name: ?string = getComponentName(componentOptions);

      const { include, exclude } = this;

      if (

        // not included

        (include && (!name || !matches(include, name))) ||

        // excluded

        (exclude && name && matches(exclude, name))

      ) {

        return vnode;

      }

 

      const { cache, keys } = this;

      // 获取键，优先获取组件的name字段，否则是组件的tag

      const key: ?string =

        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;

      // 命中缓存,直接从缓存拿vnode 的组件实例,并且重新调整了 key 的顺序放在了最后一个

      if (cache[key]) {

        vnode.componentInstance = cache[key].componentInstance;

        // make current key freshest

        remove(keys, key);

        keys.push(key);

      }

      // 不命中缓存,把 vnode 设置进缓存

      else {

        cache[key] = vnode;

        keys.push(key);

        // prune oldest entry

        // 如果配置了 max 并且缓存的长度超过了 this.max，还要从缓存中删除第一个

        if (this.max && keys.length > parseInt(this.max)) {

          pruneCacheEntry(cache, keys[0], keys, this._vnode);

        }

      }

      // keepAlive标记位

      vnode.data.keepAlive = true;

    }

    return vnode || (slot && slot[0]);

  }

}