在 Vue 3 中，如何缓存和复用动态组件，这有助于提高应用的性能，避免组件重复创建和销毁带来的开销。
下面详细介绍其使用方法和相关配置。
1. 使用组件缓存动态组件
基本使用
是 Vue 3 内置的一个组件，它可以将包裹在其中的动态组件进行缓存，当组件被切换隐藏时，其状态会被保留，再次显示时无需重新创建。
import { ref } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; const currentComponent = ref('ComponentA'); const components = { ComponentA, ComponentB };
代码解释
- 在模板中，使用
组件包裹，这样ComponentA和ComponentB在切换时会被缓存。 -
currentComponent是一个响应式变量，用于控制显示哪个组件。
包含和排除特定组件
你可以使用 include 和 exclude 属性来指定哪些组件需要被缓存或排除。这两个属性的值可以是组件名称的字符串、正则表达式或数组。
import { ref } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; const currentComponent = ref('ComponentA'); const components = { ComponentA, ComponentB };
代码解释
-
include="ComponentA"表示只有ComponentA会被缓存，ComponentB不会被缓存，每次切换到ComponentB时都会重新创建。 - 若使用
exclude属性，则与之相反，被排除的组件不会被缓存。例如会缓存除ComponentB之外的组件。
最大缓存实例数
你可以使用 max 属性来限制 缓存的最大实例数量。当缓存的实例数量超过 max 值时，最早缓存的实例会被销毁。
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 };
代码解释
-
max="2"表示最多缓存 2 个组件实例。当切换到第三个组件时，最早缓存的组件实例会被销毁。
组件缓存状态的生命周期钩子
当组件被 缓存时，会有两个特殊的生命周期钩子 onActivated 和 onDeactivated，可以在这两个钩子中执行相应的逻辑。
This is Component A.import { onActivated, onDeactivated } from 'vue'; onActivated(() => { console.log('Component A is activated.'); }); onDeactivated(() => { console.log('Component A is deactivated.'); });
代码解释
-
onActivated：当组件被激活（从缓存中显示出来）时触发。 -
onDeactivated：当组件被停用（被隐藏并放入缓存）时触发。
通过上述方法，你可以在 Vue 3 中灵活地缓存和复用动态组件，提高应用的性能和用户体验。
2. 组件实例缓存（手动管理）
除了使用 ，你还可以手动管理组件实例的缓存。通过一个对象来存储组件实例，在需要使用时从对象中获取。
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; };
代码解释
-
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
};
}
import { useDynamicComponent } from './useDynamicComponent.js'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; const { currentComponent, showComponent } = useDynamicComponent();
代码解释
-
useDynamicComponent组合式函数封装了动态组件的缓存和显示逻辑。 - 在组件中使用该组合式函数，通过调用
showComponent方法来显示不同的组件。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
