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

基本使用

一般通过特殊的<component>元素来实现动态组件的用法：

<component :is="activeComponent" />

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态，当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

如果想要组件在被“切走”的时候保留它们的状态。要解决这个问题，可以用<KeepAlive>内置组件将这些动态组件包装起来：

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

包含/排除

<KeepAlive>默认会缓存内部的所有组件实例，可以通过include和excludeprop来定制该行为。这两个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选项，无需再手动声明。

最大缓存实例数

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

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

缓存实例的生命周期

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

一个持续存在的组件可以通过onActivated()和onDeactivated()注册相应的两个状态的生命周期钩子：

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

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

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

注意：

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