KeepAlive ​

<KeepAlive> 是一个内置组件，允许我们在动态地在多个组件之间切换时有条件地缓存组件实例。

基本用法 ​

在组件基础章节中，我们介绍了使用 <component> 特殊元素实现的 动态组件 的语法

<component :is="activeComponent" />

默认情况下，当从活动组件实例切换离开时，该实例将被卸载。这会导致它持有的任何更改后的状态丢失。当该组件再次显示时，将创建一个新的实例，仅包含初始状态。

在下面的示例中，我们有两个有状态的组件 - A 包含一个计数器，而 B 包含一个通过 v-model 与输入同步的消息。尝试更新其中一个组件的状态，切换离开，然后切换回它

你会注意到，当切换回时，之前更改后的状态已经被重置。

在切换时创建新的组件实例通常是正常的行为，但在这个情况下，我们确实希望两个组件实例在它们不活跃时也能被保留。为了解决这个问题，我们可以用 <KeepAlive> 内置组件包裹我们的动态组件

<!-- Inactive components will be cached! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

现在，状态将在组件切换之间保持持久

包含/排除 ​

默认情况下，<KeepAlive> 将缓存任何包含在其内的组件实例。我们可以通过 include 和 exclude 属性自定义此行为。这两个属性可以是逗号分隔的字符串、一个 RegExp 或一个包含类型的数组

<!-- comma-delimited string -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

匹配是针对组件的 name 选项进行的，因此需要由 KeepAlive 条件缓存组件必须显式声明一个 name 选项。

最大缓存的实例数 ​

我们可以通过 max 属性限制可以缓存的组件实例的最大数量。当指定了 max 时，<KeepAlive> 的行为类似于一个 LRU 缓存：如果缓存的实例数量即将超过指定的最大计数，则将销毁最近最少访问的缓存实例，为新实例腾出空间。

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

缓存的实例的生命周期 ​

当一个组件实例从DOM中移除，但它是被<KeepAlive>缓存的组件树的一部分时，它会进入一个非激活状态，而不是被卸载。当一个组件实例作为缓存的树的组成部分被插入到DOM中时，它会被激活。

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

onActivated(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

export default {
  activated() {
    // called on initial mount
    // and every time it is re-inserted from the cache
  },
  deactivated() {
    // called when removed from the DOM into the cache
    // and also when unmounted
  }
}

注意，

• onActivatedactivated在挂载时也会被调用，而onDeactivateddeactivated在卸载时会被调用。

• 这两个钩子不仅适用于由<KeepAlive>缓存的根组件，也适用于缓存的树中的后代组件。

相关

• <KeepAlive> API参考