在 Vue 3 中，如何缓存和复用动态组件

在 Vue 3 中，如何缓存和复用动态组件，这有助于提高应用的性能，避免组件重复创建和销毁带来的开销。下面详细介绍其使用方法和相关配置。

1. 使用 <KeepAlive> 组件缓存动态组件

基本使用

<KeepAlive> 是 Vue 3 内置的一个组件，它可以将包裹在其中的动态组件进行缓存，当组件被切换隐藏时，其状态会被保留，再次显示时无需重新创建。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <!-- 使用 KeepAlive 包裹动态组件 -->
    <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 在切换时会被缓存。
• currentComponent 是一个响应式变量，用于控制显示哪个组件。

包含和排除特定组件

你可以使用 include 和 exclude 属性来指定哪些组件需要被缓存或排除。这两个属性的值可以是组件名称的字符串、正则表达式或数组。

<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 会被缓存，ComponentB 不会被缓存，每次切换到 ComponentB 时都会重新创建。
• 若使用 exclude 属性，则与之相反，被排除的组件不会被缓存。例如 <KeepAlive exclude="ComponentB"> 会缓存除 ComponentB 之外的组件。

最大缓存实例数

你可以使用 max 属性来限制 <KeepAlive> 缓存的最大实例数量。当缓存的实例数量超过 max 值时，最早缓存的实例会被销毁。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件 C</button>
    <!-- 最多缓存 2 个组件实例 -->
    <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 个组件实例。当切换到第三个组件时，最早缓存的组件实例会被销毁。

组件缓存状态的生命周期钩子

当组件被 <KeepAlive> 缓存时，会有两个特殊的生命周期钩子 onActivated 和 onDeactivated，可以在这两个钩子中执行相应的逻辑。

<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：当组件被激活（从缓存中显示出来）时触发。
• onDeactivated：当组件被停用（被隐藏并放入缓存）时触发。

通过上述方法，你可以在 Vue 3 中灵活地缓存和复用动态组件，提高应用的性能和用户体验。

2. 组件实例缓存（手动管理）

除了使用 <KeepAlive>，你还可以手动管理组件实例的缓存。通过一个对象来存储组件实例，在需要使用时从对象中获取。

<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';

// 存储组件实例的缓存对象
const componentCache = {};
const currentComponent = ref(null);

const showComponent = (name) => {
  if (!componentCache[name]) {
    const component = name === 'ComponentA' ? ComponentA : ComponentB;
    // 创建组件实例并存储到缓存中
    componentCache[name] = markRaw(shallowRef(component));
  }
  currentComponent.value = componentCache[name].value;
};
</script>

代码解释

• componentCache 是一个对象，用于存储组件实例。
• showComponent 方法根据传入的组件名称，检查缓存中是否存在该组件实例。如果不存在，则创建实例并存储到缓存中；如果存在，则直接从缓存中获取。

3. 组合式函数封装

可以将动态组件的逻辑封装到组合式函数中，提高代码的复用性。

// 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>

代码解释

• useDynamicComponent 组合式函数封装了动态组件的缓存和显示逻辑。
• 在组件中使用该组合式函数，通过调用 showComponent 方法来显示不同的组件。