在我們?nèi)粘ｉ_(kāi)發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時(shí)候回出現(xiàn)卡頓情況。

這個(gè)時(shí)候我們可以使用異步組件。

Suspense

IconParkSelect 組件因?yàn)橐x取文件，會(huì)有點(diǎn)慢，所以只用異步的方式加載。

 <Suspense>
        <IconParkSelect
          v-model="currentSelectIcon"
          :visible="iconVisible"
          @close="closeIconFormModalVisible"
          @cancel="closeIconFormModalVisible"
          @ok="insertIconToItem"
        />
        <!-- 在 #fallback 插槽中顯示 “正在加載中” -->
        <template #fallback> Loading...</template>
      </Suspense>

Suspense 有兩個(gè)插槽，當(dāng)異步組件沒(méi)有加載完成時(shí)候會(huì)先選擇 fallback 插槽數(shù)據(jù)。
然后使用異步的方式引入組件。

  import { defineAsyncComponen } from 'vue';
  // 異步獲取圖標(biāo)庫(kù)
  const IconParkSelect = defineAsyncComponent(
    () => import('@/components/common/IconParkSelect.vue')
  );

補(bǔ)充：

vue3中的異步組件

什么是異步組件

在Vue中，當(dāng)我們注冊(cè)全局或局部組件時(shí)，它們都是同步地被“立即解析并加載”的。這意味著在我們的程序初始化時(shí)，所有組件都會(huì)通過(guò)網(wǎng)絡(luò)被下載到內(nèi)存中，并且在內(nèi)存中占用一定的資源。預(yù)加載所有組件會(huì)將頁(yè)面的初始加載時(shí)間和性能降低，尤其是在移動(dòng)設(shè)備上。為了避免這種情況，Vue.js 提供了異步組件。

為什么要使用異步組件

異步組件可以將我們的組件分開(kāi)打包，按需要加載，這樣可以減輕初始頁(yè)面加載時(shí)間和減少資源浪費(fèi)。當(dāng)我們需要和路由配合使用時(shí)，異步組件也能幫助我們實(shí)現(xiàn)按需加載和動(dòng)態(tài)導(dǎo)入。這樣可以在調(diào)用組件時(shí)再切換路由實(shí)現(xiàn)動(dòng)態(tài)加載器組件，有助于提高應(yīng)用程序的性能和響應(yīng)速度。

定義異步組件

Vue3中使用defineAsyncComponent() 來(lái)定義異步組件，該API的入?yún)⑹且粋€(gè)返回組件選項(xiàng)的函數(shù)，需要使用 () => import() 函數(shù)來(lái)導(dǎo)入組件。

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

import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...從服務(wù)器獲取組件
    resolve(/* 獲取到的組件 */)
  })
}) 

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

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

上面代碼得到的 AsyncComponent 是一個(gè)外層包裝過(guò)的組件，僅在頁(yè)面需要它渲染時(shí)才會(huì)調(diào)用加載內(nèi)部實(shí)際組件的函數(shù)。

示例代碼：
使用 defineAsyncComponent 函數(shù)來(lái)定義異步組件，它返回一個(gè)組件對(duì)象：

import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
export default {
  components: {
    AsyncComponent
  }
}

上面定義了一個(gè)異步組件，組件通過(guò) components 對(duì)象進(jìn)行注冊(cè)。

異步組件的加載與錯(cuò)誤狀態(tài)

我們?cè)谶M(jìn)行異步操作時(shí)，不可避免地會(huì)涉及到網(wǎng)絡(luò)加載慢和加載錯(cuò)誤的情況，vue在設(shè)計(jì)defineAsyncComponent() 組件時(shí)也考慮到了這種情況，它為我們提供了兩個(gè)配置項(xiàng)即：加載異步組件時(shí)使用的組件loadingComponent和加載失敗后展示的組件errorComponent。我們需要?jiǎng)?chuàng)建兩個(gè)自定義組件LoadingComponent.vue 和 ErrorComponent.vue組件，作為上面兩個(gè)配置項(xiàng)使用
示例代碼如下

const AsyncComp = defineAsyncComponent({
  // 加載函數(shù)
  loader: () => import('./MyComponent.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
})

上述代碼在頁(yè)面加載時(shí)，先加載LoadingComponent組件，在加載組件顯示之前有一個(gè)默認(rèn)的 200ms 延遲。如果加載失敗，則會(huì)調(diào)用ErrorComponent組件，還可以指定一個(gè)超時(shí)時(shí)間timeout，在請(qǐng)求耗時(shí)超過(guò)指定時(shí)間時(shí)也會(huì)渲染報(bào)錯(cuò)組件。

搭配 Suspense 使用

什么是Suspense

Suspense是一個(gè)內(nèi)置的組件，可以將子組件的加載狀態(tài)統(tǒng)一管理，包括異步組件的加載狀態(tài)。它可以在異步加載組件的時(shí)候有一個(gè)loading狀態(tài)，等異步組件創(chuàng)建好之后，再顯示組件。

Suspense 組件有兩個(gè)插槽：#default 和 #fallback。兩個(gè)插槽都只允許一個(gè)直接子節(jié)點(diǎn)。

在初始渲染時(shí)，Suspense 將在內(nèi)存中渲染其默認(rèn)的#default插槽內(nèi)容。如果在這個(gè)過(guò)程中遇到任何異步依賴(lài)，則會(huì)進(jìn)入掛起狀態(tài)。在掛起狀態(tài)期間，展示的是#fallback后備內(nèi)容。當(dāng)所有遇到的異步依賴(lài)都完成后，Suspense 會(huì)進(jìn)入完成狀態(tài)，并將展示出默認(rèn)插槽#default的內(nèi)容。

如果在初次渲染時(shí)沒(méi)有遇到異步依賴(lài)，Suspense會(huì)直接進(jìn)入完成狀態(tài)。

進(jìn)入完成狀態(tài)后，只有當(dāng)默認(rèn)插槽#default的根節(jié)點(diǎn)被替換時(shí)，Suspense才會(huì)回到掛起狀態(tài)。組件樹(shù)中新的更深層次的異步依賴(lài)不會(huì)造成 Suspense回退到掛起狀態(tài)。

發(fā)生回退時(shí)， #fallback后備內(nèi)容不會(huì)立即展示出來(lái)。相反，Suspense在等待新內(nèi)容和異步依賴(lài)完成時(shí)，會(huì)展示之前 #default 插槽的內(nèi)容。這個(gè)行為可以通過(guò)一個(gè) timeout prop 進(jìn)行配置：在等待渲染新內(nèi)容耗時(shí)超過(guò) timeout 之后，Suspense 將會(huì)切換為展示 #fallback后備內(nèi)容。若 timeout 值為 0 將導(dǎo)致在替換#default 默認(rèn)內(nèi)容時(shí)立即顯示 #fallback后備內(nèi)容。

Suspense 事件

Suspense 組件會(huì)觸發(fā)三個(gè)事件：pending、resolve 和 fallback。pending 事件是在進(jìn)入掛起狀態(tài)時(shí)觸發(fā)。resolve 事件是在 default 插槽完成獲取新內(nèi)容時(shí)觸發(fā)。fallback 事件則是在 fallback 插槽的內(nèi)容顯示時(shí)觸發(fā)。

異步組件的suspensible特性

異步組件默認(rèn)就是“suspensible”的。這意味著如果組件關(guān)系鏈上有一個(gè) Suspense，那么這個(gè)異步組件就會(huì)被當(dāng)作這個(gè) Suspense的一個(gè)異步依賴(lài)。在這種情況下，加載狀態(tài)是由 Suspense 控制，而該組件自己的加載、報(bào)錯(cuò)、延時(shí)和超時(shí)等選項(xiàng)都將被忽略。

異步組件也可以通過(guò)在選項(xiàng)中指定 suspensible: false 表明不用 Suspense 控制，并讓組件始終自己控制其加載狀態(tài)。

異步組件和Suspense配合使用的示例代碼

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <p>loading...</p>
    </template>
  </Suspense>
</template>

到此這篇關(guān)于Vue3: Suspense異步加載組件的文章就介紹到這了,更多相關(guān)Vue3 Suspense異步加載組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論