vue 3 中按需加载弹窗和抽屉的核心是使用 defineasynccomponent 定义异步组件，结合动态挂载或 渲染，配合 loading/error 处理与 suspense 提升体验。
Vue 3 中按需加载弹窗和抽屉这类复杂内容，核心是把它们定义为异步组件，并结合动态挂载或 <component :is></component> 渲染。不提前引入、不打包进主包，真正用到时才拉取 JS 文件，既减小首屏体积，又避免无意义的资源消耗。
弹窗用 defineAsyncComponent + 函数式调用
适合封装成可复用的弹窗工具函数（比如 openModal({ component, props, onConfirm })）。关键点：
- 传入的组件必须是异步导入函数，例如
() => import('./MyDialog.vue') - 内部用
defineAsyncComponent包一层，便于统一控制 loading/error 状态 - 用
h()和render()动态创建 vnode 并挂载到document.body或指定容器 - 支持传参和事件透传：props 通过组件选项传入，事件用
on:xxx方式绑定
抽屉用动态组件 + v-if 控制渲染时机
抽屉通常由按钮触发、状态驱动，适合用 <component :is></component> + 异步组件对象组合：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章