Answer the caching principle of keep-alive components from the perspective of source code

// Usage of keep-alive component with dynamic component. For other usages, please refer to the official website <keep-alive
 include="['componentNameA', 'componentNameB']"
 exclude="'componentNameC'"
 :max="10">
 <component :is="view"></component>
</keep-alive>

// The isRegExp function determines whether it is a regular expression, and remove removes a member in the array. // getFirstComponentChild gets the first valid component of the VNode array. import { isRegExp, remove } from 'shared/util'
import { getFirstComponentChild } from 'core/vdom/helpers/index'
​
type VNodeCache = { [key: string]: ?VNode }; // Cache type of cache component VNode​
// Get the component name by component name or component tag (the second point noted above)
function getComponentName (opts: ?VNodeComponentOptions): ?string {
 return opts && (opts.Ctor.options.name || opts.tag)
}
​
// Determine whether include or exclude matches the component name successfully function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
 if (Array.isArray(pattern)) {
 return pattern.indexOf(name) > -1 // include or exclude is an array} else if (typeof pattern === 'string') {
 return pattern.split(',').indexOf(name) > -1 // include or exclude is a string } else if (isRegExp(pattern)) {
 return pattern.test(name) // include or exclude is a regular expression}
 return false // None of them match (note the second and third points above)
}
​
// Destroy cache function pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance // keep-alive component instance for (const key in cache) {
 const cachedNode: ?VNode = cache[key] // Component that has been cached if (cachedNode) {
  const name: ?string = getComponentName(cachedNode.componentOptions)
  // If name exists and does not match include or exclude, destroy the cached component if (name && !filter(name)) {
  pruneCacheEntry(cache, key, keys, _vnode)
  }
 }
 }
}
​
//Destroy the cache entry function pruneCacheEntry (
 cache: VNodeCache,
 key: string,
 keys: Array<string>,
 current?: VNode
) {
 const cached = cache[key] // Cached component // "Whether to continue caching components" when there is a change // If the component has been cached and the current component does not exist or the tag of the cached component is not equal to the tag of the current component if (cached && (!current || cached.tag !== current.tag)) {
 // This means that the component no longer needs to be cached. Destroy the component instance cached.componentInstance.$destroy()
 }
 cache[key] = null // Set this component in the cache to null
 remove(keys, key) // Remove the key of this component from the keys array}
​
// Example type const patternTypes: Array<Function> = [String, RegExp, Array]
​
// Expose some options of the keep-alive component export default {
 name: 'keep-alive', // component name abstract: true, // keep-alive is an abstract component​
 // Three props passed in when using the keep-alive component
 props: {
 include: patternTypes,
 exclude: patternTypes,
 max: [String, Number]
 },
​
 created () {
 this.cache = Object.create(null) // Store components that need to be cached this.keys = [] // Store the key of each component that needs to be cached, that is, the key value corresponding to the this.cache object},
​
 // When destroying a keep-alive component, destroy each component in the cache destroyed () {
 for (const key in this.cache) {
  pruneCacheEntry(this.cache, key, this.keys)
 }
 },
​
 // When the keep-alive component is mounted, it monitors the changes of include and exclude, and destroys the cached component when the conditions are met. mounted () {
 this.$watch('include', val => {
  pruneCache(this, name => matches(val, name))
 })
 this.$watch('exclude', val => {
  pruneCache(this, name => !matches(val, name))
 })
 },
​
 // The point is here render () {
 const slot = this.$slots.default // default slot for keep-alive components const vnode: VNode = getFirstComponentChild(slot) // Get the first valid component of the default slot // If vnode exists, take vnode's options const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
  //Get the name of the first valid component
  const name: ?string = getComponentName(componentOptions)
  const { include, exclude } = this // include and exclude passed by props
  if (
  // If include exists and name does not exist or name does not match (include && (!name || !matches(include, name))) ||
  // If exclude exists and name exists or name matches (exclude && name && matches(exclude, name))
  ) {
  return vnode // Indicates that no caching is required and this component is directly returned for rendering}
  
  // If a match is made, a cache operation is required const { cache, keys } = this // The cache component of the keep-alive component and the key corresponding to the cache component
  // Get the key of the first valid component
  const key: ?string = vnode.key == null
  // The same constructor can be registered as different local components // So cid alone is not enough, let's concatenate it? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
  // If this component hits the cache if (cache[key]) {
  // This component instance is replaced with the component instance in the cache vnode.componentInstance = cache[key].componentInstance
  // Update the position of the current key in keysremove(keys, key) // Remove the current key from keyskeys.push(key) // Put it at the end of keys} else {
  // If the cache is not hit, add this component to the cache cache[key] = vnode
  keys.push(key) // Put the key of this component at the end of keys // If the number of components in the cache exceeds the max passed in, destroy the LRU component in the cache if (this.max && keys.length > parseInt(this.max)) {
   pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
  }
​
  vnode.data.keepAlive = true // Set the keepAlive property of this component to true
 }
 // If the first valid component exists but its componentOptions does not exist, return this component for rendering // Or if there is no valid first component, but the default slot of the keep-alive component exists, return the first component of the default slot for rendering return vnode || (slot && slot[0])
 }
}