基本使用

我们通过<component>元素来实现动态组件的用法,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。我们想要组件能在被“切走”的时候保留它们的状态;要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来

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

当activeComponent切换组件时，原先组件的状态会被缓存，下次切换回来时会保留原有的状态

包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude 属性来决定它应该缓存哪些组件、或不应该缓存哪些组件

 include 和 exclude 属性的值都是传递一个字符串数组、以英文逗号分隔的字符串、则表达式，且都是为需要缓存的组件名

最大缓存实例数

通过传入 max 属性 来限制可被缓存的最大组件实例数 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁

缓存的实例的生命周期

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

onActivated

在首次挂载、以及每次从缓存中被重新插入的时候调用

onDeactivated

在从 DOM 上移除以及组件卸载时调用

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

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

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

注意

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