VUE内置组件-KeepAlive的应用

简言

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。
如果我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些组件包裹起来即可实现效果。

KeepAlive组件

<KeepAlive> 默认会缓存内部的所有组件实例。

用法

只需用<KeepAlive> 将要进行缓存的组件包裹起来即可。

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
<!-- 组件 -->
  ...
</KeepAlive>

组件包含（include）和排除（exclude）属性

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b" exclude="c">
  <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 选项。

max属性

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

缓存实例的生命周期

缓存的组件在要被卸载时变成不活跃状态，当重新加载时变成激活状态。
一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子：

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

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

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

示例

表单组件

<template>
  <div class="container">
    <a-form
      :layout="formState.layout"
      :model="formState"
      v-bind="formItemLayout"
    >
      <a-form-item label="姓名">
        <a-input
          v-model:value="formState.fieldA"
          placeholder="input placeholder"
        />
      </a-form-item>
      <a-form-item label="职位">
        <a-input
          v-model:value="formState.fieldB"
          placeholder="input placeholder"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  computed,
  onActivated,
  onDeactivated,
} from "vue";
const formState = reactive({
  layout: "horizontal",
  fieldA: "",
  fieldB: "",
});
const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === "horizontal"
    ? {
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
      }
    : {};
});
const buttonItemLayout = computed(() => {
  const { layout } = formState;
  return layout === "horizontal"
    ? {
        wrapperCol: {
          span: 14,
          offset: 4,
        },
      }
    : {};
});

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

onDeactivated(() => {
  console.log(
    `
    // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
    `
  );
});
</script>
<style lang="scss" scoped></style>

步骤条组件

<template>
  <div class="container">
    <div class="step__wrapper">
      <a-steps :current="step">
        <a-step>
          <template #title>第一步</template>
          <template #description>
            <span>这是第一步</span>
          </template>
        </a-step>

        <a-step title="第二步" description="这是第二步" />
        <a-step title="第三步" description="第三步" />
      </a-steps>
      <KeepAlive>
        <MyForm name="a" v-if="step === 0"> </MyForm>
        <MyForm name="b" v-else-if="step === 1"> </MyForm>
        <MyForm name="c" v-else-if="step === 2"> </MyForm>
      </KeepAlive>
      <div class="handler__button__box">
        <a-button class="button" v-show="step > 0" @click="step--">
          上一步</a-button
        >
        <a-button class="button" v-show="step < 2" @click="step++">
          下一步</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
import MyForm from "./MyForm.vue";
const step = ref<number>(0); //  当前步骤
</script>
<style lang="scss" scoped>
.container {
  height: 100px;
}
.step__wrapper {
  position: relative;
  margin: 0 100px;
  margin-top: 50px;
  height: 300px;
}
.handler__button__box {
  position: absolute;
  bottom: 0;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  & .button:nth-child(2n) {
    margin-left: 8px;
  }
}
</style>

组件没考虑父子组件的数据通信，只演示组件缓存效果。

结语

结束了。