vue3-内置组件-KeepAlive

KeepAlive

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

基本使用

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

在下面的例子中，你会看到两个有状态的 组件——A 有一个计数器， 而 B 有一个通过 v-model 同步 input 框输入内容的文字展示。 尝试先更改一下任意一个组件的状态，然后切走，再切回来：

import Com23_1 from '@/components/demo/Com23-1.vue'
import Com23_2 from '@/components/demo/Com23-2.vue'
import { ref, shallowRef } from 'vue'

const current = shallowRef(Com23_1)





.container {
}

未加 keeplive 效果

你会发现在切回来之后，之前已更改的状态都被重置了。适用于在切换时创建新的组件实例场景。

加上 keeplive 保证组件能在被“切走”的时候保留它们的状态。

...
...

  

...
...

在 DOM 内模板中使用时，它应该被写为 。

包含/排除

默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。

这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

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

在 3.2.34 或以上的版本中，使用

请注意：

• onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。

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

---

欢迎关注，后面会有一些资源可以免费获取哟~

分享前后端编程经验，技术干货，技术方案，好的资源，工具，提高开发效率。