export default {
  name: 'keep-alive',
  abstract: true, // 標(biāo)記為抽象組件，不渲染 DOM 元素

  props: {
    include: [String, RegExp, Array], // 白名單
    exclude: [String, RegExp, Array], // 黑名單
    max: [String, Number]            // 最大緩存數(shù)
  },

  created() {
    this.cache = Object.create(null) // 緩存池 { key: VNode }
    this.keys = []                   // 緩存鍵的訪問(wèn)順序
  },

  destroyed() {
    // 清理所有緩存
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  render() {
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot) // 獲取包裹的第一個(gè)組件

    const componentOptions = vnode?.componentOptions
    if (componentOptions) {
      const name = getComponentName(componentOptions)
      // 檢查是否匹配 include/exclude
      if (
        (this.include && (!name || !matches(this.include, name))) ||
        (this.exclude && name && matches(this.exclude, name))
      ) {
        return vnode
      }

      const key = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key

      // 命中緩存
      if (this.cache[key]) {
        vnode.componentInstance = this.cache[key].componentInstance
        // 更新訪問(wèn)順序
        remove(this.keys, key)
        this.keys.push(key)
      } else {
        this.cache[key] = vnode
        this.keys.push(key)
        // 清理超出 max 的舊緩存
        if (this.max && this.keys.length > parseInt(this.max)) {
          pruneCacheEntry(this.cache, this.keys[0], this.keys)
        }
      }

      vnode.data.keepAlive = true // 標(biāo)記為 keep-alive 組件
    }
    return vnode
  }
}

{
  cache: {
    'component1::key1': {
      componentInstance: ComponentInstance, // 組件實(shí)例
      data: {
        keepAlive: true,        // 特殊標(biāo)記
        // ...其他 VNode 信息
      },
      // ...完整 VNode 信息
    },
    'component2::key2': { ... }
  },
  keys: ['component1::key1', 'component2::key2']
}

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<template>
  <keep-alive 
    :include="['Home', 'User']" 
    :exclude="['Login']" 
    :max="5"
  >
    <router-view></router-view>
  </keep-alive>
</template>

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>