快捷導(dǎo)航

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

更新時間：2023年04月21日 11:21:03 作者：自xing且樂觀~

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

基本用法?

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

import { defineAsyncComponent } from 'vue'
 
const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...從服務(wù)器獲取組件
    resolve(/* 獲取到的組件 */)
  })
})
// ... 像使用其他一般組件一樣使用 `AsyncComp`

如你所見，defineAsyncComponent方法接收一個返回 Promise 的加載函數(shù)。這個 Promise 的resolve回調(diào)方法應(yīng)該在從服務(wù)器獲得組件定義時調(diào)用。你也可以調(diào)用reject(reason)表明加載失敗。

ES 模塊動態(tài)導(dǎo)入也會返回一個 Promise，所以多數(shù)情況下我們會將它和defineAsyncComponent搭配使用。類似 Vite 和 Webpack 這樣的構(gòu)建工具也支持此語法 (并且會將它們作為打包時的代碼分割點(diǎn))，因此我們也可以用它來導(dǎo)入 Vue 單文件組件：

import { defineAsyncComponent } from 'vue'
 
const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

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

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

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

你也可以在局部注冊組件時使用defineAsyncComponent：

<script>
import { defineAsyncComponent } from 'vue'
 
export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import('./components/AdminPageComponent.vue')
    )
  }
}
</script>
 
<template>
  <AdminPage />
</template>

加載與錯誤狀態(tài)?

異步操作不可避免地會涉及到加載和錯誤狀態(tài)，因此defineAsyncComponent()也支持在高級選項(xiàng)中處理這些狀態(tài)：

const AsyncComp = defineAsyncComponent({
  // 加載函數(shù)
  loader: () => import('./Foo.vue'),
 
  // 加載異步組件時使用的組件
  loadingComponent: LoadingComponent,
  // 展示加載組件前的延遲時間，默認(rèn)為 200ms
  delay: 200,
 
  // 加載失敗后展示的組件
  errorComponent: ErrorComponent,
  // 如果提供了一個 timeout 時間限制，并超時了
  // 也會顯示這里配置的報(bào)錯組件，默認(rèn)值是：Infinity
  timeout: 3000
})

如果提供了一個加載組件，它將在內(nèi)部組件加載時先行顯示。在加載組件顯示之前有一個默認(rèn)的 200ms 延遲——這是因?yàn)樵诰W(wǎng)絡(luò)狀況較好時，加載完成得很快，加載組件和最終組件之間的替換太快可能產(chǎn)生閃爍，反而影響用戶感受。

如果提供了一個報(bào)錯組件，則它會在加載器函數(shù)返回的 Promise 拋錯時被渲染。你還可以指定一個超時時間，在請求耗時超過指定時間時也會渲染報(bào)錯組件。