Vue的異步組件怎么使用

這篇文章主要講解了“Vue的異步組件怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue的異步組件怎么使用”吧！

基本用法

在大型項(xiàng)目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時(shí)再?gòu)?a title="服務(wù)器" target="_blank" href="http://kemok4.com/">服務(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ò)組件。

搭配 Suspense 使用

異步組件可以搭配內(nèi)置的<Suspense>組件一起使用。

感謝各位的閱讀，以上就是“Vue的異步組件怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue的異步組件怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！