1. keep-alive
<keep-alive>组件用于缓存动态组件的实例，以便在它们被切换时保持状态。例如，当我们在一个选项卡中切换不同的视图时，可以使用<keep-alive>组件缓存这些视图的状态，以便在切换回来时不需要重新渲染。具体用法如下：
1.1. 基本用法
结合第十二章动态组件的代码，完成了以下的示例，不了解动态组件的同学可以看Vue 3 第十二章：组件三（动态组件-component）这篇文章。在下面的例子中，你会看到两个有状态的组件——A 和B有一个通过input框输入内容的文字展示。尝试先更改一下任意一个组件的状态，然后切走，再切回来：
你会发现在切回来之后，之前已更改的状态都被重置了。
在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用<KeepAlive>内置组件将这些动态组件包装起来：
// KeepAlive.vue
<template>
<div>
<button
v-for="(item, index) in tabs"
:key="index"
@click="currentTab = item.comName"
>
{
{ item.name }}
</button>
<keep-alive>
<component :is="currentTab" class="tab"></component>
</keep-alive>
</div>
</template>
<script setup lang="ts">
import ComA from './components/ComA.vue'
import ComB from './components/ComB.vue'
import {
reactive, shallowRef } from 'vue'
// reactive 会使数据变成响应式，此处为了节省性能开销，可以使用 shallowRef 或者 markRaw 跳过 proxy 代理
const currentTab = shallowRef(ComA)
const tabs = reactive([
{
name: 'ComA',
comName: shallowRef(ComA)
},
{
name: 'ComB',
comName: shallowRef(ComB)
},
])
</script>
<style scoped>
</style>
1.2. 包含/排除
<KeepAlive>默认会缓存内部的所有组件实例，但我们可以通过include和exclude prop 来定制该行为。这两个 prop的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="ComA,ComB">
<component :is="currentTab" />
</KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/ComA|ComB/">
<component :is="currentTab" />
</KeepAlive>
<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['ComA', 'ComB']">
<component :is="currentTab" />
</KeepAlive>
它会根据组件的name选项进行匹配，所以组件如果想要条件性地被KeepAlive缓存，就必须显式声明一个name选项。
注意：在 3.2.34 或以上的版本中，使用<script setup>的单文件组件会自动根据文件名生成对应的name选项，无需再手动声明。
1.3. 最大缓存实例数
我们可以通过传入maxprop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了max后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。
<!-- 设置最大缓存个数 (需使用 `v-bind`) -->
<KeepAlive :max="10">
<component :is="currentTab" />
</KeepAlive>
1.4. <keepAlive>组件的生命周期
当一个组件实例从DOM上移除但因为被<KeepAlive>缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。
一个持续存在的组件可以通过onActivated()和onDeactivated()注册相应的两个状态的生命周期钩子：
<script setup>
import {
onActivated, onDeactivated } from 'vue'
onActivated(() => {
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时
})
onDeactivated(() => {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
})
</script>
请注意：
onActivated在组件挂载时也会调用，并且onDeactivated在组件卸载时也会调用。
这两个钩子不仅适用于<KeepAlive>缓存的根组件，也适用于缓存树中的后代组件。