快捷導(dǎo)航

在Vue3中實(shí)現(xiàn)緩存和復(fù)用動(dòng)態(tài)組件

更新時(shí)間：2026年04月29日 16:52:12 作者：Astrifall

本文介紹了在Vue3中使用<KeepAlive>組件和手動(dòng)管理組件實(shí)例來(lái)緩存和復(fù)用動(dòng)態(tài)組件的方法,使用<KeepAlive>可以緩存特定組件,控制緩存實(shí)例數(shù)量,并通過(guò)生命周期鉤子執(zhí)行相應(yīng)邏輯,手動(dòng)管理則通過(guò)對(duì)象存儲(chǔ)組件實(shí)例,提高性能,最后,將邏輯封裝到組合式函數(shù)中,增強(qiáng)代碼復(fù)用性

1. 使用<KeepAlive>組件緩存動(dòng)態(tài)組件

基本使用

<KeepAlive> 是 Vue 3 內(nèi)置的一個(gè)組件，它可以將包裹在其中的動(dòng)態(tài)組件進(jìn)行緩存，當(dāng)組件被切換隱藏時(shí)，其狀態(tài)會(huì)被保留，再次顯示時(shí)無(wú)需重新創(chuàng)建。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">顯示組件 A</button>
    <button @click="currentComponent = 'ComponentB'">顯示組件 B</button>
    <!-- 使用 KeepAlive 包裹動(dòng)態(tài)組件 -->
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB
};
</script>

代碼解釋

在模板中，使用 <KeepAlive> 組件包裹 <component :is="currentComponent" />，這樣 ComponentA 和 ComponentB 在切換時(shí)會(huì)被緩存。
currentComponent 是一個(gè)響應(yīng)式變量，用于控制顯示哪個(gè)組件。

包含和排除特定組件

你可以使用 include 和 exclude 屬性來(lái)指定哪些組件需要被緩存或排除。這兩個(gè)屬性的值可以是組件名稱的字符串、正則表達(dá)式或數(shù)組。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">顯示組件 A</button>
    <button @click="currentComponent = 'ComponentB'">顯示組件 B</button>
    <!-- 只緩存 ComponentA -->
    <KeepAlive include="ComponentA">
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB
};
</script>

代碼解釋

include="ComponentA" 表示只有 ComponentA 會(huì)被緩存，ComponentB 不會(huì)被緩存，每次切換到 ComponentB 時(shí)都會(huì)重新創(chuàng)建。
若使用 exclude 屬性，則與之相反，被排除的組件不會(huì)被緩存。例如 <KeepAlive exclude="ComponentB"> 會(huì)緩存除 ComponentB 之外的組件。

最大緩存實(shí)例數(shù)

你可以使用 max 屬性來(lái)限制 <KeepAlive> 緩存的最大實(shí)例數(shù)量。當(dāng)緩存的實(shí)例數(shù)量超過(guò) max 值時(shí)，最早緩存的實(shí)例會(huì)被銷毀。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">顯示組件 A</button>
    <button @click="currentComponent = 'ComponentB'">顯示組件 B</button>
    <button @click="currentComponent = 'ComponentC'">顯示組件 C</button>
    <!-- 最多緩存 2 個(gè)組件實(shí)例 -->
    <KeepAlive max="2">
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB,
  ComponentC
};
</script>

代碼解釋

max="2" 表示 <KeepAlive> 最多緩存 2 個(gè)組件實(shí)例。當(dāng)切換到第三個(gè)組件時(shí)，最早緩存的組件實(shí)例會(huì)被銷毀。

組件緩存狀態(tài)的生命周期鉤子

當(dāng)組件被 <KeepAlive> 緩存時(shí)，會(huì)有兩個(gè)特殊的生命周期鉤子 onActivated 和 onDeactivated，可以在這兩個(gè)鉤子中執(zhí)行相應(yīng)的邏輯。

<template>
  <div>
    This is Component A.
  </div>
</template>

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

onActivated(() => {
  console.log('Component A is activated.');
});

onDeactivated(() => {
  console.log('Component A is deactivated.');
});
</script>

代碼解釋

onActivated：當(dāng)組件被激活（從緩存中顯示出來(lái)）時(shí)觸發(fā)。
onDeactivated：當(dāng)組件被停用（被隱藏并放入緩存）時(shí)觸發(fā)。

通過(guò)上述方法，你可以在 Vue 3 中靈活地緩存和復(fù)用動(dòng)態(tài)組件，提高應(yīng)用的性能和用戶體驗(yàn)。

2. 組件實(shí)例緩存（手動(dòng)管理）

除了使用 <KeepAlive>，你還可以手動(dòng)管理組件實(shí)例的緩存。通過(guò)一個(gè)對(duì)象來(lái)存儲(chǔ)組件實(shí)例，在需要使用時(shí)從對(duì)象中獲取。

<template>
  <div>
    <button @click="showComponent('ComponentA')">顯示組件 A</button>
    <button @click="showComponent('ComponentB')">顯示組件 B</button>
    <component :is="currentComponent" v-if="currentComponent" />
  </div>
</template>

<script setup>
import { ref, shallowRef, markRaw } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

// 存儲(chǔ)組件實(shí)例的緩存對(duì)象
const componentCache = {};
const currentComponent = ref(null);

const showComponent = (name) => {
  if (!componentCache[name]) {
    const component = name === 'ComponentA' ? ComponentA : ComponentB;
    // 創(chuàng)建組件實(shí)例并存儲(chǔ)到緩存中
    componentCache[name] = markRaw(shallowRef(component));
  }
  currentComponent.value = componentCache[name].value;
};
</script>

代碼解釋

componentCache 是一個(gè)對(duì)象，用于存儲(chǔ)組件實(shí)例。
showComponent 方法根據(jù)傳入的組件名稱，檢查緩存中是否存在該組件實(shí)例。如果不存在，則創(chuàng)建實(shí)例并存儲(chǔ)到緩存中；如果存在，則直接從緩存中獲取。

3. 組合式函數(shù)封裝

可以將動(dòng)態(tài)組件的邏輯封裝到組合式函數(shù)中，提高代碼的復(fù)用性。

// useDynamicComponent.js
import { ref, shallowRef, markRaw } from 'vue';

export function useDynamicComponent() {
  const componentCache = {};
  const currentComponent = ref(null);

  const showComponent = (name, component) => {
    if (!componentCache[name]) {
      componentCache[name] = markRaw(shallowRef(component));
    }
    currentComponent.value = componentCache[name].value;
  };

  return {
    currentComponent,
    showComponent
  };
}

<template>
  <div>
    <button @click="showComponent('ComponentA', ComponentA)">顯示組件 A</button>
    <button @click="showComponent('ComponentB', ComponentB)">顯示組件 B</button>
    <component :is="currentComponent" v-if="currentComponent" />
  </div>
</template>

<script setup>
import { useDynamicComponent } from './useDynamicComponent.js';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const { currentComponent, showComponent } = useDynamicComponent();
</script>