In-depth analysis of the use of Keep-Alive cache components in Vue

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

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- Regular expressions (use `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive> 

{
  path: 'list',
  name: 'itemList', // List page  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: 'List Page'
 }
}

<div  class='wrapper'>
    <keep-alive>
        <!-- View components that require cache --> 
        <router-view v-if="$"></router-view>
     </keep-alive>
      <!-- 不View components that require cache -->
     <router-view v-if="!$"></router-view>
</div>

export default {
  name: 'keep-alive',
  abstract: true,
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
  created () {
     = (null)
     = []
  },
  destroyed () {
    for (const key in ) {
      pruneCacheEntry(, key, )
    }
  },
  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  render() {
    /* Get the first component node in the default slot */
    const slot = this.$
    const vnode = getFirstComponentChild(slot)
    /* Get componentOptions for this component node */
    const componentOptions = vnode && 
    if (componentOptions) {
      /* Get the name of the node of the component, and priority is obtained for the name field of the component. If the name does not exist, get the tag of the component */
      const name = getComponentName(componentOptions)
      const { include, exclude } = this
      /* If the name is not in inlcude or exists in exlude, it means that it is not cached and directly returns vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
      const { cache, keys } = this
      /* Get the key value of the component */
      const key =  == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ?  + ( ? `::${}` : '')
        : 
     /* After getting the key value, go to the object to find out whether the value is present. If so, it means that the component has a cache, that is, hit cache */
      if (cache[key]) {
         = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        (key)
      }
        /* If there is no hit cache, set it into cache */
        else {
        cache[key] = vnode
        (key)
        // prune oldest entry
        /* If max is configured and the cache length exceeds, delete the first one from the cache */
        if ( &&  > parseInt()) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }
       = true
    }
    return vnode || (slot && slot[0])
  }
}

 = {
    'key1':'Component 1',
    'key2':'Component 2',
    // ...
}

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* Determine that there is no component currently in the rendered state and destroy it*/
  if (cached && (!current ||  !== )) {
    .$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName()
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

const key =  == null? 
 + ( ? `::${}` : '')
: 

/* If the cache is hit, take the vnode component instance directly from the cache */
if (cache[key]) {
     = cache[key].componentInstance
    /* Adjust the order of the component key, delete it from the original place and re-place it in the last */
    remove(keys, key)
    (key)
} 

/* If there is no hit cache, set it into cache */
else {
    cache[key] = vnode
    (key)
    /* If max is configured and the cache length exceeds, delete the first one from the cache */
    if ( &&  > parseInt()) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

beforeRouteEnter(to, from, next){
    next(vm=>{
        (vm)
        // Every time you enter the route execution        ()  // Get data    })
},

activated(){
   () // Get data},