Brevemente
<KeepAlive> es un componente incorporado cuya función es almacenar en caché instancias de componentes eliminados cuando se cambia dinámicamente entre varios componentes.
De forma predeterminada, una instancia de componente se destruye cuando se reemplaza. Esto hará que pierda cualquier estado modificado: cuando el componente se vuelva a mostrar, se creará una nueva instancia con solo el estado inicial.
Si realmente queremos que los componentes conserven su estado cuando se "cortan". Para resolver este problema, podemos envolver estos componentes con componentes integrados <KeepAlive> para lograr el efecto.
Componente KeepAlive
<KeepAlive> almacena en caché todas las instancias de componentes internos de forma predeterminada.
uso
Simplemente envuelva el componente que se almacenará en caché con <KeepAlive>.
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
<!-- 组件 -->
...
</KeepAlive>
Atributos de inclusión y exclusión de componentes
<KeepAlive> almacenará en caché todas las instancias de componentes internos de forma predeterminada, pero podemos personalizar este comportamiento a través de accesorios de inclusión y exclusión. El valor de ambas propiedades puede ser una cadena separada por comas, una expresión regular o una matriz que contenga ambos tipos:
<!-- 以英文逗号分隔的字符串 -->
<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>
Los valores coincidentes de las dos propiedades coincidirán de acuerdo con la opción de nombre del componente , por lo que si KeepAlive desea almacenar en caché el componente de forma condicional, debe declarar explícitamente una opción de nombre.
atributo máximo
Max prop limita la cantidad máxima de instancias de componentes que se pueden almacenar en caché. <KeepAlive> se comporta como un caché LRU cuando se especifica max: si el número de instancias en caché está a punto de exceder el número máximo especificado, la instancia almacenada en caché a la que no se ha accedido durante más tiempo se destruirá para dejar espacio para las nuevas.
El ciclo de vida de una instancia de caché
Los componentes almacenados en caché se vuelven inactivos cuando se descargan y activos cuando se vuelven a cargar.
Un componente persistente puede registrar los dos ganchos de ciclo de vida de estado correspondientes a través de onActivated() y onDeactivated():
<script setup>
import {
onActivated, onDeactivated } from 'vue'
onActivated(() => {
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时
})
onDeactivated(() => {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
})
</script>
ejemplo
componente de formulario
<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>
componente de barra escalonada
<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>
El componente no considera la comunicación de datos entre los componentes principal y secundario, y solo demuestra el efecto del almacenamiento en caché del componente.
epílogo
se acabó.