(三)vue3之Async Components异步组件

最新推荐文章于 2025-10-31 15:50:01 发布

原创最新推荐文章于 2025-10-31 15:50:01 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue3中AsyncComponents异步组件的变化。在Vue3中，定义异步组件需使用`defineAsyncComponent`，`component`配置项更名为`loader`，并且loader函数不再接受`resolve`和`reject`参数，而是返回Promise。对比Vue2的使用方式，详细展示了Vue3中异步组件的无配置项及配置项定义方法。

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
})