vue 3 中 defineasynccomponent 实现按需加载，分离代码加载与逻辑执行时机；支持 script setup 简洁写法及 loading/error 提示，适用于弹窗、图表等非首屏组件。
Vue 3 单文件组件中使用 defineAsyncComponent 实现按需加载，核心是把“组件代码的加载时机”和“组件内部逻辑的执行时机”分开控制。它不改变组件写法，只改变注册和引入方式，适合弹窗、图表、管理子模块等非首屏必需内容。
在 script setup 中直接定义异步组件
这是最常用也最简洁的方式：用 defineAsyncComponent 包裹动态 import()，然后像普通组件一样在模板中使用。
- 在
<script setup></script>中导入并定义：
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))
const UserEditor = defineAsyncComponent(() => import('./UserEditor.vue'))
- 模板中直接使用，无需额外判断是否加载完成：
Vue 会在首次渲染该标签时触发加载，后续复用直接从缓存取。
添加加载与错误反馈更稳妥
真实项目中建议配置 loadingComponent 和 errorComponent，避免白屏或卡顿感。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章