<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">切換組件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

export default {
  name: 'keep-alive',
  abstract: true, // 抽象組件，不會(huì)渲染到 DOM 中
  props: {
    include: [String, RegExp, Array], // 包含的組件名稱
    exclude: [String, RegExp, Array], // 排除的組件名稱
    max: [String, Number] // 最大緩存數(shù)量
  },
  created() {
    this.cache = Object.create(null); // 初始化緩存對(duì)象
    this.keys = []; // 初始化鍵數(shù)組
  },
  destroyed() {
    for (const key in this.cache) {
      // 銷毀緩存的組件實(shí)例
      this.pruneCacheEntry(this.cache[key]);
    }
  },
  mounted() {
    // 監(jiān)聽 include 和 exclude 的變化
    this.$watch('include', val => {
      this.pruneCache(name => matches(val, name));
    });
    this.$watch('exclude', val => {
      this.pruneCache(name =>!matches(val, name));
    });
  },
  render() {
    const vnode = getFirstComponentChild(this.$slots.default); // 獲取第一個(gè)子組件的虛擬節(jié)點(diǎn)
    const componentOptions = vnode && vnode.componentOptions;
    if (componentOptions) {
      const name = getComponentName(componentOptions); // 獲取組件名稱
      const { include, exclude } = this;
      if (
        // 判斷是否需要緩存
        (include && (!name ||!matches(include, name))) ||
        (exclude && name && matches(exclude, name))
      ) {
        return vnode;
      }

      const { cache, keys } = this;
      const key = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key;
      if (cache[key]) {
        // 從緩存中獲取組件實(shí)例
        vnode.componentInstance = cache[key].componentInstance;
        // 調(diào)整緩存順序
        remove(keys, key);
        keys.push(key);
      } else {
        // 緩存新的組件實(shí)例
        cache[key] = vnode;
        keys.push(key);
        // 超過(guò)最大緩存數(shù)量時(shí)，移除最早的緩存
        if (this.max && keys.length > parseInt(this.max)) {
          this.pruneCacheEntry(keys[0]);
        }
      }

      vnode.data.keepAlive = true; // 標(biāo)記組件被緩存
    }
    return vnode;
  },
  methods: {
    pruneCache(filter) {
      for (const key in this.cache) {
        const cachedNode = this.cache[key];
        if (cachedNode) {
          const name = getComponentName(cachedNode.componentOptions);
          if (name &&!filter(name)) {
            this.pruneCacheEntry(cachedNode);
          }
        }
      }
    },
    pruneCacheEntry(vnode) {
      if (vnode) {
        // 銷毀組件實(shí)例
        vnode.componentInstance.$destroy();
        this.cache[vnode.key] = null;
        remove(this.keys, vnode.key);
      }
    }
  }
};