異步組件

基本用(yòng)法 ​

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

js

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {

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

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

resolve(/* 獲取到(dào)的組件 */)

})

})

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

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

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

js

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>

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

)

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

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

js

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

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

))

你(nǐ)也(yě)可以在局部注冊組件時(shí)使用(yòng) defineAsyncComponent：

vue

<script>

import { defineAsyncComponent } from 'vue'

export default {

components: {

AdminPage: defineAsyncComponent(() =>

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

)

}

}

</script>

<template>

<AdminPage />

</template>

加載與錯誤狀态 ​

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

js

const AsyncComp = defineAsyncComponent({

// 加載函數

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

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

loadingComponent: LoadingComponent,

// 展示加載組件前的延遲時(shí)間，默認爲 200ms

delay: 200,

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

errorComponent: ErrorComponent,

// 如果提供了(le)一個 timeout 時(shí)間限制，并超時(shí)了(le)

// 也(yě)會(huì)顯示這(zhè)裏配置的報(bào)錯組件，默認值是：Infinity

timeout: 3000

})

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

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

搭配 Suspense 使用(yòng) ​

異步組件可以搭配内置的 <Suspense> 組件一起使用(yòng)，若想了(le)解 <Suspense> 和(hé)異步組件之間交互，請(qǐng)參閱 <Suspense> 章節。