vue keep-alive分析

定义：

keep-alive组件用于包裹动态组件，当组件切换时会缓存不活动的组件实例，而不是销毁它们。这样可以避免重复渲染，提高性能。

属性：

• include: 字符串或正则表达式，只有名称匹配的组件会被缓存。
• exclude: 字符串或正则表达式，名称匹配的组件不会被缓存
• max: 数字，缓存组件的最大数量

原理：

1. 获取默认插槽，取得keep-alive的第一个子组件，拿到组件名字，在include中会被缓存，在exclude中不会缓存。
2. 如果第一次渲染，储存key和vnode到虚拟dom上，否则取缓存的虚拟dom的Vue实例componentInstance设置到虚拟dom上。
3. 处理缓存数据vnodeToCache，将缓存的虚拟节点处理

export default {
  name: 'keep-alive',
  // 抽象组件，不会直接渲染到dom上，主要是为了提供逻辑或功能支持
  abstract: true,
  // 三个props
  props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
  },

  methods: {
    cacheVNode() {
      const { cache, keys, vnodeToCache, keyToCache } = this
      if (vnodeToCache) {
        const { tag, componentInstance, componentOptions } = vnodeToCache
        cache[keyToCache] = {
          name: _getComponentName(componentOptions),
          tag,
          componentInstance
        }
        keys.push(keyToCache)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
        this.vnodeToCache = null
      }
    }
  },

  created() {
    this.cache = Object.create(null)
    this.keys = []
  },

  destroyed() {
    // 删除缓存的所有虚拟dom并卸载组件
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted() {
    this.cacheVNode()
    // 如果匹配上，清楚缓存的虚拟dom并卸载组件
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    // 如果匹配不上，清楚缓存的虚拟dom并卸载组件
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },

  updated() {
    this.cacheVNode()
  },

  render() {
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    const componentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name = _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
      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 {
        // delay setting the cache until update
        this.vnodeToCache = vnode
        this.keyToCache = key
      }

      // @ts-expect-error can vnode.data can be undefined
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}