Keep-alive source code analysis (instance code)

<keep-alive :include="componentOne`" :exclude="componentTwo" :max="num"> 
    <component :is="currentComponent"></component> 
</keep-alive>

<keep-alive :include="componentOne`" :exclude="componentTwo" :max="num"> 
    <router-view :is="currentComponent"></router-view> 
</keep-alive>

<router-view v-slot="{ Component }">
   <keep-alive :include="includeList">
	    <component :is="Component"/>
   </keep-alive>
</router-view>

// Source code location: src/core/components/export default {
  name: 'keep-alive',
  abstract: true,
  props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
  },
  created () {
     = (null)
     = []
  },
  destroyed () {
    for (const key in ) {
      pruneCacheEntry(, key, )
    }
  },
  mounted () {
   // Check whether there is a cache without a cache, and then go to the cache directly    ()
    // Here we use watch to monitor include and exclude  // If there is any change, update according to the latest include and exclude  // Remove cached vnodes that do not meet the include and exclude restrictions from  this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  updated() {
    ()
  },
  methods:{
   cacheVNode() {
      const { cache, keys, vnodeToCache, keyToCache } = this
      if (vnodeToCache) {
        const { tag, componentInstance, componentOptions } = vnodeToCache
        cache[keyToCache] = {
          name: _getComponentName(componentOptions),
          tag,
          componentInstance
        }
        (keyToCache)
        // prune oldest entry
        if ( &&  > parseInt()) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
         = null
      }
    }
 },
  render(){
    //Introduction below  }
}

// src/core/components/

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current ||  !== )) {
    .$destroy() // Execute the component's destory hook function  }
  cache[key] = null  // The key of the object in cache is set to null  remove(keys, key) // Delete the elements corresponding to keys}

render () {
	// Get the first component vnode in the keep-alive component child node    const slot = this.$
    const vnode = getFirstComponentChild(slot)
    // Get the component's configuration option object    const componentOptions = vnode && 
    if (componentOptions) {
      // Get the name of the component      const name = _getComponentName(componentOptions)
      const { include, exclude } = this
       // If the current component name is not in include or the component's name is in exclude		  // It means that the current component is not cached by keep-alive. At this time, just return vnode directly      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
     // The code execution ends here, indicating that the current component is cached by the keep-alive component      const { cache, keys } = this
        // Define the key used for vnode cache      const key =
         == null
          ? // same constructor may get registered as different local components
            // so cid alone is not enough (#3269)
             +
            ( ? `::${}` : '')
          : 
           // If cache[key] already exists, it means that the current component vnode has been cached, and it needs to be restored and restored at this time      if (cache[key]) {
      	// Assign cached Vue instances to         = cache[key].componentInstance
        // make current key freshest
        	// Remove the key from the keys first, and then push the key, which ensures that the current key is at the end of the keys array        remove(keys, key)
        (key)
      } else {
        // delay setting the cache until update
        	// If cache[key] does not exist, it means that the current child component appears for the first time. At this time, vnode needs to be cached into cache and keys are stored in the keys string array.  Here is an intermediate variable to receive, and when the data changes, update is triggered to call the cacheVNode method.         = vnode
         = key
      }

      // @ts-expect-error can  can be undefined
       // Set the property to true, which has a function of identifying vnode, identifying this		  // vnode is the render function of the keep-alive component. This identifier is useful in the following running code       = true
    }
    return vnode || (slot && slot[0])
  }