1.简介

vue3中的Async Components异步组件使用进行了很大的改动，改动如下：

• 使用defineAsyncComponent方法来定义async components异步组件
• 组件配置项的component重新命名为loader
• loader函数（对应vue2的component函数）不再接受resolve和reject参数，并且必须返回Promise

2.vue2的使用方式

vue2中通过一个返回promise函数来定义async components异步组件：

const asyncPage = () => import('./NextPage.vue')

多配置方式如下：

const asyncPage = {
  component: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

3.vue3的使用方式

在vue3中，定义async components异步组件必须使用defineAsyncComponent方法来明确定义async components异步组件而不是同步组件。同时，component配置项重新命名为loader。示例如下：

import { defineAsyncComponent } from 'vue' // 需要引入defineAsyncComponent
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// 无配置项定义方式
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

// 配置项定义方式
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'), // component配置项重新命名为loader
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})