keepAlive
<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例
在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件
kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 、也就是所谓的组件缓存
基本使用
默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态 —— 当这个组件再一次被显示时，会创建一个只带有初始状态的新实例
在切换时创建新的组件实例通常是有意义的，在有些场景我们的确想要组件能在被“切走”的时候保留它们的状态，要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
注意
在 DOM 模板中使用时，它应该被写为 <keep-alive>
包含/排除 include exclude
<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为
这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>
它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项
在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明
最大缓存实例数
我们可以通过传入 max prop 来限制可被缓存的最大组件实例数
<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间
<KeepAlive :max="10">
<component :is="activeComponent" />
</KeepAlive>
缓存实例的生命周期
当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载
当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活
一个持续存在的组件可以通过 activated 和 deactivated 选项来注册相应的两个状态的生命周期钩子
export default {
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
}
}
注意：
activated 在组件挂载时也会调用，并且 deactivated 在组件卸载时也会调用。
这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。
使用补充说明
// 只缓存组件name为a或者b的组件
<keep-alive include="a,b">
<component />
</keep-alive>
// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c">
<component />
</keep-alive>
// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b">
<component />
</keep-alive>
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5">
<component />
</keep-alive>
1、keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
2、理解参数
keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:
1、include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
2、exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
3、max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
注：当使用正则表达式或者数组时，一定要使用v-bind
3、防坑指南
1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存
4.包含在 keep-alive 中，但符合 exclude ，不会调用 activated 和 deactivated