Vue 3.0 異步組件

#概覽

以下是對變化的高層次概述：

• 新的 defineAsyncComponent 助手方法，用于顯式地定義異步組件
• component 選項重命名為 loader
• Loader 函數(shù)本身不再接收 resolve 和 reject 參數(shù)，且必須返回一個 Promise

如需更深入的解釋，請繼續(xù)閱讀！

#介紹

以前，異步組件是通過將組件定義為返回 Promise 的函數(shù)來創(chuàng)建的，例如：

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

或者，對于帶有選項的更高階的組件語法：

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

#3.x 語法

現(xiàn)在，在 Vue 3 中，由于函數(shù)式組件被定義為純函數(shù)，因此異步組件的定義需要通過將其包裝在新的 defineAsyncComponent 助手方法中來顯式地定義：

import { defineAsyncComponent } from 'vue'
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'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

對 2.x 所做的另一個更改是，component 選項現(xiàn)在被重命名為 loader，以便準(zhǔn)確地傳達(dá)不能直接提供組件定義的信息。

import { defineAsyncComponent } from 'vue'
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

此外，與 2.x 不同，loader 函數(shù)不再接收 resolve 和 reject 參數(shù)，且必須始終返回 Promise。

// 2.x 版本
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}
// 3.x 版本
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)

有關(guān)異步組件用法的詳細(xì)信息，請參閱：

• 指南：動態(tài) & 異步組件