一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法

前言

當我們的項目達到一定的規模時,對於某些組件來說,我們並不希望一開始全部加載,而是需要的時候進行加載;這樣的做得目的可以很好的提高用戶體驗。

為瞭實現這個功能,Vue3中為我們提供瞭一個方法,即defineAsyncComponent,這個方法可以傳遞兩種類型的參數,分別是函數類型和對象類型,接下來我們分別學習。

傳遞工廠函數作為參數

defineAsyncComponent方法接收一個工廠函數是它的基本用法,這個工廠函數必須返回一個PromisePromiseresolve應該返回一個組件。

我們這裡以Vue Cli創建的項目為例,這裡我稍微做瞭一下修改,將頭部的圖片拆分為一個組件,代碼如下:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from './components/LogoImg.vue'
import HelloWorld from './components/HelloWorld.vue'
</script>

現在我們就將<hello-world>組件修改為異步組件,示例代碼如下:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 簡單用法
const HelloWorld = defineAsyncComponent(() =>
  import('./components/HelloWorld.vue'),
)
</script>

我們這裡為瞭看到效果,將import延遲執行,示例代碼如下:

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 定義一個耗時執行的函數,t 表示延遲的時間, callback 表示需要執行的函數,可選
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 定義異步組件,這裡這樣寫是為瞭查看效果
const HelloWorld = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    ;(async function () {
      try {
        await time(2000)
        const res = await import('./components/HelloWorld.vue')
        resolve(res)
      } catch (error) {
        reject(error)
      }
    })()
  })
})
</script>

代碼運行結果如下所示:

當2s後才會加載<hello-world>組件。

傳遞對象類型作為參數

defineAsyncComponent方法也可以接收一個對象作為參數,該對象中有如下幾個參數:

  • loader:同工廠函數;
  • loadingComponent:加載異步組件時展示的組件;
  • errorComponent:加載組件失敗時展示的組件;
  • delay:顯示loadingComponent之前的延遲時間,單位毫秒,默認200毫秒;
  • timeout:如果提供瞭timeout,並且加載組件的時間超過瞭設定值,將顯示錯誤組件,默認值為Infinity(單位毫秒);
  • suspensible:異步組件可以退出<Suspense>控制,並始終控制自己的加載狀態。
  • onError:一個函數,該函數包含4個參數,分別是errorretryfailattempts,這4個參數分別是錯誤對象、重新加載的函數、加載程序結束的函數、已經重試的次數。

如下代碼展示defineAsyncComponent方法的對象類型參數的用法:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'
import LoadingComponent from './components/loading.vue'
import ErrorComponent from './components/error.vue'

// 定義一個耗時執行的函數,t 表示延遲的時間, callback 表示需要執行的函數,可選
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 記錄加載次數
let count = 0
const HelloWorld = defineAsyncComponent({
  // 工廠函數
  loader: () => {
    return new Promise((resolve, reject) => {
      ;(async function () {
        await time(300)
        const res = await import('./components/HelloWorld.vue')
        if (++count < 3) {
          // 前兩次加載手動設置加載失敗
          reject(res)
        } else {
          // 大於3次成功
          resolve(res)
        }
      })()
    })
  },
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 0,
  timeout: 1000,
  suspensible: false,
  onError(error, retry, fail, attempts) {
    // 註意,retry/fail 就像 promise 的 resolve/reject 一樣:
    // 必須調用其中一個才能繼續錯誤處理。
    if (attempts < 3) {
      // 請求發生錯誤時重試,最多可嘗試 3 次
      console.log(attempts)
      retry()
    } else {
      fail()
    }
  },
})
</script>

上面的代碼中,我們加載組件時前兩次會請求錯誤,隻有第三次加載才會成功,代碼運行結果如下:

如果加載失敗則會展示ErrorComponent組件。

總結

到此這篇關於一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法的文章就介紹到這瞭,更多相關Vue3異步組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: