異步組件

基本用法 ​

在大型項目中，我們可(kě)能(néng)需要(yào)拆分應用為(wèi)更小的塊，并僅在需要(yào)時(shí)再從(cóng)服務器加載相關組件。Vue 提供了(le) defineAsyncComponent 方法來實現此功能(néng)：

js

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {

return new Promise((resolve, reject) => {

// ...從(cóng)服務器獲取組件

resolve(/* 獲取到的組件 */)

})

})

// ... 像使用其他(tā)一(yī)般組件一(yī)樣使用 `AsyncComp`

如(rú)你所見(jiàn)，defineAsyncComponent 方法接收一(yī)個返回 Promise 的加載函數(shù)。這(zhè)個 Promise 的 resolve 回調方法應該在從(cóng)服務器獲得組件定義時(shí)調用。你也可(kě)以調用 reject(reason) 表明(míng)加載失敗。

ES 模塊動态導入也會返回一(yī)個 Promise，所以多數(shù)情況下(xià)我們會将它和(hé) defineAsyncComponent 搭配使用。類似 Vite 和(hé) Webpack 這(zhè)樣的構建工(gōng)具也支持此語法 (并且會将它們作(zuò)為(wèi)打包時(shí)的代碼分割點)，因此我們也可(kě)以用它來導入 Vue 單文件組件：

js

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>

import('./components/MyComponent.vue')

)

最後得到的 AsyncComp 是一(yī)個外(wài)層包裝過的組件，僅在頁面需要(yào)它渲染時(shí)才會調用加載內(nèi)部實際組件的函數(shù)。它會将接收到的 props 和(hé)插槽傳給內(nèi)部組件，所以你可(kě)以使用這(zhè)個異步的包裝組件無縫地(dì)替換原始組件，同時(shí)實現延遲加載。

與普通(tōng)組件一(yī)樣，異步組件可(kě)以使用 app.component() 全局注冊：

js

app.component('MyComponent', defineAsyncComponent(() =>

import('./components/MyComponent.vue')

))

你也可(kě)以在局部注冊組件時(shí)使用 defineAsyncComponent：

vue

<script>

import { defineAsyncComponent } from 'vue'

export default {

components: {

AdminPage: defineAsyncComponent(() =>

import('./components/AdminPageComponent.vue')

)

}

}

</script>

<template>

<AdminPage />

</template>

加載與錯誤狀态 ​

異步操作(zuò)不可(kě)避免地(dì)會涉及到加載和(hé)錯誤狀态，因此 defineAsyncComponent() 也支持在高級選項中處理這(zhè)些狀态：

js

const AsyncComp = defineAsyncComponent({

// 加載函數(shù)

loader: () => import('./Foo.vue'),

// 加載異步組件時(shí)使用的組件

loadingComponent: LoadingComponent,

// 展示加載組件前的延遲時(shí)間(jiān)，默認為(wèi) 200ms

delay: 200,

// 加載失敗後展示的組件

errorComponent: ErrorComponent,

// 如(rú)果提供了(le)一(yī)個 timeout 時(shí)間(jiān)限制，并超時(shí)了(le)

// 也會顯示這(zhè)裏配置的報錯組件，默認值是：Infinity

timeout: 3000

})

如(rú)果提供了(le)一(yī)個加載組件，它将在內(nèi)部組件加載時(shí)先行(xíng)顯示。在加載組件顯示之前有一(yī)個默認的 200ms 延遲——這(zhè)是因為(wèi)在網絡狀況較好時(shí)，加載完成得很(hěn)快(kuài)，加載組件和(hé)最終組件之間(jiān)的替換太快(kuài)可(kě)能(néng)産生閃爍，反而影響用戶感受。

如(rú)果提供了(le)一(yī)個報錯組件，則它會在加載器函數(shù)返回的 Promise 抛錯時(shí)被渲染。你還可(kě)以指定一(yī)個超時(shí)時(shí)間(jiān)，在請(qǐng)求耗時(shí)超過指定時(shí)間(jiān)時(shí)也會渲染報錯組件。

搭配 Suspense 使用 ​

異步組件可(kě)以搭配內(nèi)置的 <Suspense> 組件一(yī)起使用，若想了(le)解 <Suspense> 和(hé)異步組件之間(jiān)交互，請(qǐng)參閱 <Suspense> 章(zhāng)節。