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"><buttonv-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 缓存的根组件，也适用于缓存树中的后代组件
