Introduces a keep alive

Function:

Save the state of the component during component switching to avoid repeating DOM rendering

Two hook functions:

1. Cache the component status to the memory and trigger the Deactivated hook function

2. When a component is reactivated, the Activated hook function is triggered

Note: These two life cycle functions are called only when the component is wrapped by keep-alive and do not take effect if used as a normal component. It is often used with include and exclude.

For example:

For example, page A now scrolls 1/2, then switches to page B, and then switches back to the same scrolling position. In this process, keep-alive is used to cache and activate components.

Source code analysis:

export default {
  name: 'keep-alive'.abstract: true.props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String.Number]
  },

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

  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    // The include and exclude attributes are monitored for component caching
    this.$watch('include'.val= > {
      pruneCache(this.name= > matches(val, name))
    })
    this.$watch('exclude'.val= > {
      pruneCache(this.name= >! matches(val, name)) }) }, render () {// Render time
    const slot = this.$slots.default // Get the slot
    const vnode: VNode = getFirstComponentChild(slot) // Cache the first component by default
    constcomponentOptions: ? VNodeComponentOptions = vnode && vnode.componentOptionsif (componentOptions) {
      // check pattern
      constname: ? string = getComponentName(componentOptions)const { include, exclude } = this
      // Determine whether to cache
      if (
        // not included(include && (! name || ! matches(include, name))) ||// excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      constkey: ? 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
      // If the component does not have a key, it is not cached. If the component has a key, it is cached
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key) // Delete the current key
        keys.push(key) // Put the key at the end
      } else {
        cache[key] = vnode / / the cache vnode
        keys.push(key) // Put the key at the end
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)  // Delete the 0 when the maximum limit is exceeded
        }
      }

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