Vue3中的非同步元件defineAsyncComponentAPI怎麼使用

傳遞工廠函數作為參數

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

我們這裡以Vue Cli創建的專案為例，這裡我稍微做了一下修改，將頭部的圖片拆分為一個元件，程式碼如下：

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

<script setup>
import LogoImg from &#39;./components/LogoImg.vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
</script>

現在我們就將<hello-world>元件修改為非同步元件，範例程式碼如下：

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

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
  import(&#39;./components/HelloWorld.vue&#39;),
)
</script>

我們這裡為了看到效果，將import延遲執行，範例程式碼如下：

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 定义一个耗时执行的函数，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(&#39;./components/HelloWorld.vue&#39;)
        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 &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;
import LoadingComponent from &#39;./components/loading.vue&#39;
import ErrorComponent from &#39;./components/error.vue&#39;

// 定义一个耗时执行的函数，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(&#39;./components/HelloWorld.vue&#39;)
        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怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！