异步组件

new

概览

以下是对变化的高层次概述：

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

如需更深入的解释，请继续阅读！

介绍

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

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

或者，对于带有选项的更高阶的组件语法：

  1. const asyncPage = {
  2.   component: () => import('./NextPage.vue'),
  3.   delay: 200,
  4.   timeout: 3000,
  5.   error: ErrorComponent,
  6.   loading: LoadingComponent
  7. }

3.x 语法

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

  1. import { defineAsyncComponent } from 'vue'
  2. import ErrorComponent from './components/ErrorComponent.vue'
  3. import LoadingComponent from './components/LoadingComponent.vue'
  5. // 不带选项的异步组件
  6. const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
  8. // 带选项的异步组件
  9. const asyncPageWithOptions = defineAsyncComponent({
  10.   loader: () => import('./NextPage.vue'),
  11.   delay: 200,
  12.   timeout: 3000,
  13.   errorComponent: ErrorComponent,
  14.   loadingComponent: LoadingComponent
  15. })

对 2.x 所做的另一个更改是，component 选项现在被重命名为 loader，以便准确地传达不能直接提供组件定义的信息。

  1. import { defineAsyncComponent } from 'vue'
  3. const asyncPageWithOptions = defineAsyncComponent({
  4.   loader: () => import('./NextPage.vue'),
  5.   delay: 200,
  6.   timeout: 3000,
  7.   error: ErrorComponent,
  8.   loading: LoadingComponent
  9. })

此外，与 2.x 不同，loader 函数不再接收 resolve 和 reject 参数，且必须始终返回 Promise。

  1. // 2.x 版本
  2. const oldAsyncComponent = (resolve, reject) => {
  3.   /* ... */
  4. }
  6. // 3.x 版本
  7. const asyncComponent = defineAsyncComponent(
  8.   () =>
  9.     new Promise((resolve, reject) => {
  10.       /* ... */
  11.     })
  12. )

有关异步组件用法的详细信息，请参阅：