KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

1.组件属性

<KeepAlive>组件可接收以下属性

interface KeepAliveProps {
  /**
   * 如果指定，则只有与 `include` 名称
   * 匹配的组件才会被缓存。
   */
  include?: MatchPattern
  /**
   * 任何名称与 `exclude`
   * 匹配的组件都不会被缓存。
   */
  exclude?: MatchPattern
  /**
   * 最多可以缓存多少组件实例。
   */
  max?: number | string
}

type MatchPattern = string | RegExp | (string | RegExp)[]

2.基本使用

如下所示，当我们使用<component>组件时，切换不同的组件，之前的组件都会被销毁，如果一些大型的页面将会有较大的性能消耗

当切换不同的组件，再切回去，发现原来组件的数据已经不存在了，因为原先的组件已经销毁了

vue

<component :is="com" />

vue

<KeepAlive>
	<component :is="com" />
</KeepAlive>

但如果我们使用KeepAlive组件包裹住这个<component>，这个组件将会被缓存，切换组件再切回去，发现原先的数据还在

3.包含和排除

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude 属性来定制该行为。这两个 prop 的值都可以是以下几个类型：

一个以英文逗号分隔的字符串
一个正则表达式
包含以上两种类型的一个数组

vue

<!-- 以英文逗号分隔的字符串 -->
<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>

例如，如下组件，组件二被缓存，组件一未被缓存

TIP

include和exclude会根据组件的name选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

4.最大缓存实例数

我们可以通过传入 max 属性来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

vue

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

5.缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

因此onMounted()和onUnMounted()两个声明周期钩子将不再适用

取而代之的是onActivated()和onDeactivated()

vue

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

注意：

onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。
这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。

KeepAlive ​

1.组件属性 ​

2.基本使用 ​

3.包含和排除 ​

4.最大缓存实例数 ​

5.缓存实例的生命周期 ​