一文搞懂Vue3中的非同步元件defineAsyncComponentAPI的用法

2022-07-13 14:00:22

前言

當我們的專案達到一定的規模時，對於某些元件來說，我們並不希望一開始全部載入，而是需要的時候進行載入；這樣的做得目的可以很好的提高使用者體驗。

為了實現這個功能，Vue3中為我們提供了一個方法，即defineAsyncComponent，這個方法可以傳遞兩種型別的引數，分別是函數型別和物件型別，接下來我們分別學習。

傳遞工廠函數作為引數

defineAsyncComponent方法接收一個工廠函數是它的基本用法，這個工廠函數必須返回一個Promise，Promise的resolve應該返回一個元件。

我們這裡以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個引數，分別是error、retry、fail和attempts，這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非同步元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

一文搞懂Vue3中的非同步元件defineAsyncComponentAPI的用法

目錄

前言

傳遞工廠函數作為引數

傳遞物件型別作為引數

總結

熱門文章