defineAsyncComponent()
定義一個(gè)異步組件，它在運(yùn)行時(shí)是懶加載的。參數(shù)可以是一個(gè)異步加載函數(shù)，或是對(duì)加載行為進(jìn)行更具體定制的一個(gè)選項(xiàng)對(duì)象。
基本用法
在大型項(xiàng)目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時(shí)再?gòu)姆?wù)器加載相關(guān)組件。Vue 提供了 defineAsyncComponent 方法來(lái)實(shí)現(xiàn)此功能：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...從服務(wù)器獲取組件
resolve(/* 獲取到的組件 */)
})
})
// ... 像使用其他一般組件一樣使用 `AsyncComp`
如你所見，defineAsyncComponent 方法接收一個(gè)返回 Promise 的加載函數(shù)。這個(gè) Promise 的 resolve 回調(diào)方法應(yīng)該在從服務(wù)器獲得組件定義時(shí)調(diào)用。你也可以調(diào)用 reject(reason) 表明加載失敗。
ES 模塊動(dòng)態(tài)導(dǎo)入也會(huì)返回一個(gè) Promise，所以多數(shù)情況下我們會(huì)將它和 defineAsyncComponent 搭配使用。類似 Vite 和 Webpack 這樣的構(gòu)建工具也支持此語(yǔ)法 (并且會(huì)將它們作為打包時(shí)的代碼分割點(diǎn))，因此我們也可以用它來(lái)導(dǎo)入 Vue 單文件組件：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)
最后得到的 AsyncComp 是一個(gè)外層包裝過(guò)的組件，僅在頁(yè)面需要它渲染時(shí)才會(huì)調(diào)用加載內(nèi)部實(shí)際組件的函數(shù)。它會(huì)將接收到的 props 和插槽傳給內(nèi)部組件，所以你可以使用這個(gè)異步的包裝組件無(wú)縫地替換原始組件，同時(shí)實(shí)現(xiàn)延遲加載。
與普通組件一樣，異步組件可以使用 app.component() 全局注冊(cè)：
app.component('MyComponent', defineAsyncComponent(() =>
import('./components/MyComponent.vue')
))
也可以直接在父組件中直接定義它們：
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>
加載與錯(cuò)誤狀態(tài)
異步操作不可避免地會(huì)涉及到加載和錯(cuò)誤狀態(tài)，因此 defineAsyncComponent() 也支持在高級(jí)選項(xiàng)中處理這些狀態(tài)：
const AsyncComp = defineAsyncComponent({
// 加載函數(shù)
loader: () => import('./Foo.vue'),
// 加載異步組件時(shí)使用的組件
loadingComponent: LoadingComponent,
// 展示加載組件前的延遲時(shí)間，默認(rèn)為 200ms
delay: 200,
// 加載失敗后展示的組件
errorComponent: ErrorComponent,
// 如果提供了一個(gè) timeout 時(shí)間限制，并超時(shí)了
// 也會(huì)顯示這里配置的報(bào)錯(cuò)組件，默認(rèn)值是：Infinity
timeout: 3000
})
如果提供了一個(gè)加載組件，它將在內(nèi)部組件加載時(shí)先行顯示。在加載組件顯示之前有一個(gè)默認(rèn)的 200ms 延遲——這是因?yàn)樵诰W(wǎng)絡(luò)狀況較好時(shí)，加載完成得很快，加載組件和最終組件之間的替換太快可能產(chǎn)生閃爍，反而影響用戶感受。
如果提供了一個(gè)報(bào)錯(cuò)組件，則它會(huì)在加載器函數(shù)返回的 Promise 拋錯(cuò)時(shí)被渲染。你還可以指定一個(gè)超時(shí)時(shí)間，在請(qǐng)求耗時(shí)超過(guò)指定時(shí)間時(shí)也會(huì)渲染報(bào)錯(cuò)組件。
