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>

组件没考虑父子组件的数据通信,只演示组件缓存效果。
在这里插入图片描述

结语

结束了。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值