<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>

// 源碼位置：src/core/components/keep-alive.js
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 () {
   //查看是否有緩存沒有緩存的話直接走緩存
    this.cacheVNode()
    // 這里借助 watch 監(jiān)控 include  和 exclude 
  // 如果有變化的話，則按照最新的 include 和 exclude 更新 this.cache
  // 將不滿足 include、exclude 限制的 緩存vnode 從 this.cache 中移除  
  this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  updated() {
    this.cacheVNode()
  },
  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
      }
    }
 },
  render(){
    //下面詳細介紹
  }
}

// src/core/components/keep-alive.js

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy() // 執(zhí)行組件的destory鉤子函數(shù)
  }
  cache[key] = null  // cache中對象的key設(shè)為null
  remove(keys, key) // 刪除keys對應(yīng)的元素
}

render () {
	// 獲取 keep-alive 組件子節(jié)點中的第一個組件 vnode
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    // 獲取組件的配置選項對象
    const componentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // 獲取組件的名稱
      const name = _getComponentName(componentOptions)
      const { include, exclude } = this
       // 如果當前的組件 name 不在 include 中或者組件的 name 在 exclude 中
		  // 說明當前的組件是不被 keep-alive 所緩存的，此時直接 return vnode 即可
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
     // 代碼執(zhí)行到這里，說明當前的組件受 keep-alive 組件的緩存
      const { cache, keys } = this
        // 定義 vnode 緩存用的 key
      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
           // 如果 cache[key] 已經(jīng)存在的話，則說明當前的組件 vnode 已經(jīng)被緩存過了,此時需要將其恢復(fù)還原出來
      if (cache[key]) {
      	// 將緩存的 Vue 實例賦值給 vnode.componentInstance
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        	// 先從 keys 中移除 key，然后再 push key，這可以保證當前的 key 在 keys 數(shù)組中的最后面
        remove(keys, key)
        keys.push(key)
      } else {
        // delay setting the cache until update
        	// 如果 cache[key] 不存在的話，說明當前的子組件是第一次出現(xiàn)，此時需要將 vnode 緩存到 cache 中，將 key 存儲到 keys 字符串數(shù)組中。這里是用一個中間變量接收，當數(shù)據(jù)變化時觸發(fā)updated去調(diào)用cacheVNode方法。
        this.vnodeToCache = vnode
        this.keyToCache = key
      }

      // @ts-expect-error can vnode.data can be undefined
       // 將 vnode.data.keepAlive 屬性設(shè)置為 true，這對 vnode 有一個標識的作用，標識這個
		  // vnode 是 keep-alive 組件的 render 函數(shù) return 出去的，這個標識在下面的運行代碼中有用
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }