defineAsyncComponent() 定义异步组件
最后更新：2026-10-22
defineAsyncComponent() 定义异步组件
defineAsyncComponent() 创建按需加载的组件：首次渲染时才加载代码，用于路由级/重型组件的懒加载。
| 分组 | 全局 API |
|---|---|
| 类型 | API |
| 作用域 | 全局 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
const Editor = defineAsyncComponent(() => import("./Editor.vue"))
// 带加载与错误兜底
const Panel = defineAsyncComponent({
loader: () => import("./Panel.vue"),
loadingComponent: Spinner,
errorComponent: ErrorBox,
delay: 200
})⚙️ 参数
| loader | options | 返回 Promise 的加载函数，或配置对象（loader/loadingComponent/errorComponent/delay/timeout） |
|---|
返回值：异步组件（首次渲染时开始加载）
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
页面稍等约 0.8 秒后出现「懒加载组件已就位」。💡 要点
💡 提示 路由级懒加载是最大收益点：首屏只下载当前页面代码。
ℹ️ 说明 配置对象的 delay 可避免闪一下 loading；timeout 控制超时错误。
⚠️ 注意 异步组件默认每次重建都会重新加载（已缓存则复用）；需要保状态配 KeepAlive。
🏷️ 相关全局 API
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和动态 import 的关系？
A 它包装 import()：把 Promise 变成可渲染组件，并支持加载/错误兜底。
Q 什么时候触发加载？
A 首次需要渲染该组件时；之后复用已缓存模块。
Q 能配合 Suspense 吗？
A 能，Suspense 可接管等待状态，此时无需 loadingComponent。
