开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

在我们进行vue的组件开发时，有时候对于某些组件，在进行切换的并且切换回来的时候，我们想要保存其已有的状态，也就是说缓存被移除的组件，我们就可以利用vue内置的<KeepAlive>组件。

`<KeepAlive>`

当我们想要把相应的组件在切换时也保留其的状态时，只要通过<KeepAlive>把相应的组件包起来就行。

<!-- 可以将一些活跃性不强的组件进行缓存 --> 
<KeepAlive> 
    <component :is="activeComponent" /> 
</KeepAlive>

当然，有些时候对于<KeepAlive>内包括的组件，我们并不想缓存全部。这时我们就可以通过 include 和 exclude prop 来自定义该行为。

include 和 exclude 接收的值可以是以英文逗号分隔的字符串、一个正则表达式，亦或者包含这两种类型的一个数组。

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="x,y">
  <component :is="show" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/x|y/">
  <component :is="show" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['x', 'y']">
  <component :is="show" />
</KeepAlive>

其匹配的机制是会通过组件的name选项进行匹配，所以想要进行条件性的缓存，就需要显示的声明组件的name选项。

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

缓存实例的生命周期

当我们缓存了一个组件的时候，它是不会被卸载的，也就是不会进行Vue组件的生命周期，但对于缓存的组件vue给我们提供了两个状态的生命周期钩子。

以组件实例从DOM上移除后，为不活跃状态。
以组件实例重新插入DOM中时，为激活状态。

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

onActivated(() => {
  // 首次挂载以及重新插入DOM中时调用
})

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

Vue中的KeepAlive

前言

<KeepAlive>

缓存实例的生命周期

`<KeepAlive>`