动态组件 + 异步组件，让你的 Vue 应用起飞
你是不是也遇到过这种情况：应用越做越大，页面打开越来越慢，用户开始抱怨卡顿？明明代码写得没问题，可性能就是上不去。
别担心，今天我要分享的 Vue 动态组件和异步组件技巧，能让你的应用性能瞬间起飞！看完本文，你将掌握 3 大核心技巧，轻松解决组件加载性能问题。
先来看个真实场景：一个后台管理系统有几十个功能模块，如果一次性加载所有组件，首屏加载时间可能达到 5 秒以上！用户每次打开都要看着空白页面干等，体验极差。
Strategy:
Isolation:
Edit: DeepClone(source) # 深拷贝隔离源数据
Add: CreateEmpty() # 全新空对象
Lifecycle:
Open: v-if=true # 创建新实例 (推荐)
Close: Destroy() # 自动销毁
ManualReset (Alternative):
Watch(visible):
if true: nextTick(resetFields)
Close: resetFields()
Cleanup:
onUnmounted: ClearSideEffects() # 清理定时器/事件/实例
pnpm install lodash-es --save
首先定义一个子组件my-component
<template>
<view class="dddd"></view>
</template>
import {
createApp,
h,
ref,
Component,
ComponentInternalInstance
} from 'vue';
import AddDialog from './AddDialog.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
/**
* 打开添加对话框
* @param currentInstance - 当前组件实例
* @param url - 请求接口地址
* @param title - 对话框标题
* @param config - 表单配置
*/
export const openAddDialog = (currentInstance: ComponentInternalInstance | null, url: string, title: string, config: any[]) => {
// 创建用于挂载对话框的容器
const container = document.createElement('div');
document.body.appendChild(container);
const parentApp = currentInstance?.appContext.app;
// 定义对话框组件引用
const dialogRef = ref<InstanceType<typeof AddDialog>>();
// 创建 Vue 应用实例
const app = createApp({
setup() {
// 渲染 AddDialog 组件
return () => h(AddDialog, {
ref: dialogRef,
title,
url,
config,
onClose: () => {
destroyDialog();
}
});
}
});
if (parentApp) {
// 继承全局属性
Object.assign(app.config.globalProperties, parentApp.config.globalProperties);
// 继承局部注册组件
if (currentInstance) {
// @ts-ignore 绕过 TypeScript 类型检查，获取内部组件定义
const localComponents = currentInstance.type?.components || {};
for (const [name, component] of Object.entries(localComponents)) {
app.component(name, component as Component);
}
}
}
// 在应用实例中注册 Element Plus
app.use(ElementPlus);
// 定义销毁对话框的方法
const destroyDialog = () => {
app.unmount();
document.body.removeChild(container);
};
// 挂载应用实例
app.mount(container);
// 打开对话框
if (dialogRef.value) {
dialogRef.value.open();
}
return {
destroy: destroyDialog
};
};