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

這個時候我們可以使用異步組件。

Suspense

IconParkSelect 組件因為要讀取文件，會有點(diǎn)慢，所以只用異步的方式加載。

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

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

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

補(bǔ)充：

vue3中的異步組件

什么是異步組件

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

為什么要使用異步組件

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

定義異步組件

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

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

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

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

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

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

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

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

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

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

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

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

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

搭配 Suspense 使用

什么是Suspense

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

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

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

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

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

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

Suspense 事件

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

異步組件的suspensible特性

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

異步組件也可以通過在選項中指定 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論