Vue3中的異步組件defineAsyncComponentAPI怎么使用

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

傳遞工廠函數(shù)作為參數(shù)

defineAsyncComponent方法接收一個(gè)工廠函數(shù)是它的基本用法，這個(gè)工廠函數(shù)必須返回一個(gè)Promise，Promise的resolve應(yīng)該返回一個(gè)組件。

我們這里以Vue Cli創(chuàng)建的項(xiàng)目為例，這里我稍微做了一下修改，將頭部的圖片拆分為一個(gè)組件，代碼如下：

<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>

現(xiàn)在我們就將<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'

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

我們這里為了看到效果，將import延遲執(zhí)行，示例代碼如下：

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

// 定義一個(gè)耗時(shí)執(zhí)行的函數(shù)，t 表示延遲的時(shí)間， callback 表示需要執(zhí)行的函數(shù)，可選
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>

當(dāng)2s后才會(huì)加載<hello-world>組件。

傳遞對(duì)象類型作為參數(shù)

defineAsyncComponent方法也可以接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象中有如下幾個(gè)參數(shù)：

• loader：同工廠函數(shù)；

• loadingComponent：加載異步組件時(shí)展示的組件；

• errorComponent：加載組件失敗時(shí)展示的組件；

• delay：顯示loadingComponent之前的延遲時(shí)間，單位毫秒，默認(rèn)200毫秒；

• timeout：如果提供了timeout，并且加載組件的時(shí)間超過了設(shè)定值，將顯示錯(cuò)誤組件，默認(rèn)值為Infinity（單位毫秒）；

• suspensible：異步組件可以退出<Suspense>控制，并始終控制自己的加載狀態(tài)。

• onError：一個(gè)函數(shù)，該函數(shù)包含4個(gè)參數(shù)，分別是error、retry、fail和attempts，這4個(gè)參數(shù)分別是錯(cuò)誤對(duì)象、重新加載的函數(shù)、加載程序結(jié)束的函數(shù)、已經(jīng)重試的次數(shù)。

如下代碼展示defineAsyncComponent方法的對(duì)象類型參數(shù)的用法：

<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'

// 定義一個(gè)耗時(shí)執(zhí)行的函數(shù)，t 表示延遲的時(shí)間， callback 表示需要執(zhí)行的函數(shù)，可選
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 記錄加載次數(shù)
let count = 0
const HelloWorld = defineAsyncComponent({
  // 工廠函數(shù)
  loader: () => {
    return new Promise((resolve, reject) => {
      ;(async function () {
        await time(300)
        const res = await import('./components/HelloWorld.vue')
        if (++count < 3) {
          // 前兩次加載手動(dòng)設(shè)置加載失敗
          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 一樣：
    // 必須調(diào)用其中一個(gè)才能繼續(xù)錯(cuò)誤處理。
    if (attempts < 3) {
      // 請(qǐng)求發(fā)生錯(cuò)誤時(shí)重試，最多可嘗試 3 次
      console.log(attempts)
      retry()
    } else {
      fail()
    }
  },
})
</script>

上面的代碼中，我們加載組件時(shí)前兩次會(huì)請(qǐng)求錯(cuò)誤，只有第三次加載才會(huì)成功，如果加載失敗則會(huì)展示ErrorComponent組件。

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