基本用法

组件异步加载，通过 defineAsyncComponent 方法来实现。该方法参数是一个返回 Promise 的加载函数。resolve 回调方法应该在从服务器获得组件定义时调用。reject(reason) 表明加载失败。

示例：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})
// ... 像使用其他一般组件一样使用 `AsyncComp`

使用 defineAsyncComponent 方法来导入 Vue 单文件组件。它返回的是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。

示例：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

异步组件可以使用 app.component() 全局注册。

示例：

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

直接在父组件中直接定义它们。

示例：

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

加载与错误状态

defineAsyncComponent() 也支持在高级选项中处理这些状态。

示例：

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})