简言
<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>
组件没考虑父子组件的数据通信,只演示组件缓存效果。
结语
结束了。