簡単に言うと
<KeepAlive> は、複数のコンポーネント間を動的に切り替えるときに、削除されたコンポーネント インスタンスをキャッシュする機能を持つ組み込みコンポーネントです。
デフォルトでは、コンポーネント インスタンスは置換されると破棄されます。これにより、コンポーネント内の変更された状態が失われます。コンポーネントが再度表示されると、初期状態のみを含む新しいインスタンスが作成されます。
コンポーネントが「切り取られた」ときにその状態を保持したい場合。この問題を解決するには、これらのコンポーネントを <KeepAlive> 組み込みコンポーネントでラップして効果を実現します。
キープアライブコンポーネント
<KeepAlive> は、デフォルトですべての内部コンポーネント インスタンスをキャッシュします。
使用法
キャッシュするコンポーネントを <KeepAlive> でラップするだけです。
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
<!-- 组件 -->
...
</KeepAlive>
コンポーネントの包含属性と除外属性
<KeepAlive> はデフォルトですべての内部コンポーネント インスタンスをキャッシュしますが、include および exclude props を通じてこの動作をカスタマイズできます。両方の props の値は、コンマ区切りの文字列、正規表現、または両方のタイプを含む配列にすることができます。
<!-- 以英文逗号分隔的字符串 -->
<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>
2 つのプロパティの一致する値は、コンポーネントの name オプションに従って一致するため、コンポーネントが条件付きで KeepAlive によってキャッシュされることを希望する場合は、name オプションを明示的に宣言する必要があります。
最大属性
max プロパティは、キャッシュできるコンポーネント インスタンスの最大数を制限します。max が指定されている場合、<KeepAlive> は LRU キャッシュのように動作します。キャッシュされたインスタンスの数が指定された最大数を超えようとしている場合、最も長い時間アクセスされていないキャッシュされたインスタンスは、新しいインスタンスのためのスペースを確保するために破棄されます。
キャッシュ インスタンスのライフサイクル
キャッシュされたコンポーネントは、アンロードされると非アクティブになり、再ロードされるとアクティブになります。
永続コンポーネントは、onActivated() および onDeactivated() を介して、対応する 2 つの状態ライフサイクル フックを登録できます。
<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>
このコンポーネントは、親コンポーネントと子コンポーネント間のデータ通信を考慮せず、コンポーネント キャッシュの効果のみを示します。
エピローグ
終わりました。