Vue 异步组件
使用 defineAsyncComponent 按需加载组件，减少首屏体积，优化应用性能。 · 难度：入门 · +15XP
异步组件的作用
异步组件允许你将组件的定义推迟到需要渲染时才加载，通过代码分割（Code Splitting）减少初始包体积。Vue 3 使用 defineAsyncComponent 定义。
基本用法
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./MyComponent.vue')
)
组件使用方式与普通组件完全一致。
高级配置
const AsyncComp = defineAsyncComponent({
loader: () => import('./HeavyComponent.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 200, // 延迟显示 loading 组件
timeout: 3000 // 超时时间
})| 选项 | 类型 | 说明 |
|---|---|---|
| loader | Function | 返回 Promise 的加载函数 |
| loadingComponent | Component | 加载中显示的组件 |
| errorComponent | Component | 加载失败显示的组件 |
| delay | number | 延迟显示 loading（毫秒） |
| timeout | number | 超时时间（毫秒） |
配合 Suspense
异步组件常与 <Suspense> 一起使用，提供更流畅的加载体验。
练习提示
1. 创建一个异步组件，模拟 3 秒加载延迟。
2. 添加一个 loading 组件，在加载过程中显示“正在加载...”。