关于keepalive和＜component＞

keepalive：
官网说：它的功能是在多个组件间动态切换时缓存被移除的组件实例。
我说：就是保护某个组件使之不会在切换的时候被重置
component：
类似于tab的动态组件实现，一个简单的小例子就能明白

<script>
import Home from './Home.vue'
import Posts from './Posts.vue'
import Archive from './Archive.vue'
  
export default {
  components: {
    Home,
    Posts,
    Archive
  },
  data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive']
    }
  }
}
</script>

<template>
  <div class="demo">
    <button
       v-for="item in tabs"
       :key="item"
       :class="['tab-button', { active: currentTab === item }]"
       @click="currentTab = item"
     >
      {{ item }}
    </button>
	  <component :is="currentTab" class="tab"></component>
  </div>
</template>

通过:is="currentTab"绑定currentTab来匹配组件

当使用<component :is=“…” 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 <KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态。
关于keepAlive直接把官网复制过来
缓存实例的生命周期​
当一个组件实例从 DOM 上移除但因为被 <KeepAlive缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过 activated 和 deactivated 选项来注册相应的两个状态的生命周期钩子：

export default {
  activated() {
    // 在首次挂载、
    // 以及每次从缓存中被重新插入的时候调用
  },
  deactivated() {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
  }
}

请注意：

activated 在组件挂载时也会调用，并且 deactivated 在组件卸载时也会调用。

这两个钩子不仅适用于 <KeepAlive 缓存的根组件，也适用于缓存树中的后代组件