异步组件
新

概述

以下是变更的概述

新的 defineAsyncComponent 辅助方法，用于显式定义异步组件
component 选项重命名为 loader
加载器函数本身不接收 resolve 和 reject 参数，必须返回一个 Promise

有关更深入的解释，请继续阅读！

简介

以前，异步组件是通过简单地将组件定义为返回 Promise 的函数来创建的，例如

const asyncModal = () => import('./Modal.vue')

或者，对于具有选项的更高级组件语法

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

3.x 语法

现在，在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件定义需要通过将其包装在新的 defineAsyncComponent 辅助方法中来显式定义

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Async component without options
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Async component with options
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

注意

Vue Router 支持类似的机制来异步加载路由组件，称为延迟加载。尽管存在相似之处，但此功能与 Vue 对异步组件的支持不同。您不应在使用 Vue Router 配置路由组件时使用 defineAsyncComponent。您可以在 Vue Router 文档的延迟加载路由部分中了解更多信息。

从 2.x 开始的另一个变更是在 2.x 中，component 选项现在被重命名为 loader，以便准确地传达不能直接提供组件定义。

import { defineAsyncComponent } from 'vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

此外，与 2.x 不同，加载器函数不再接收 resolve 和 reject 参数，并且必须始终返回一个 Promise。

// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

// 3.x version
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)

有关异步组件用法的更多信息，请参见

异步组件 新 ​

概述 ​

简介 ​

3.x 语法 ​

异步组件
新

概述

简介

3.x 语法