快捷導(dǎo)航

關(guān)于Vue的異步組件

更新時(shí)間：2023年04月21日 11:21:03 作者：自xing且樂(lè)觀~

在大型項(xiàng)目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時(shí)再?gòu)姆?wù)器加載相關(guān)組件。Vue 提供了defineAsyncComponent 方法來(lái)實(shí)現(xiàn)此功能,需要的朋友可以參考下

基本用法?

在大型項(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`

如你所見(jiàn)，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')
))

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

<script>
import { defineAsyncComponent } from 'vue'
 
export default {
  components: {
    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ò)組件。