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：載入非同步元件時所顯示的元件；
：載入元件失敗時展示的元件；delay：顯示
timeout：如果提供了
（單位毫秒）；suspensible：非同步元件可以退出<Suspense>控制，並且始終控制自己的載入狀態。
：一個函數，函數包含4個參數，分別是error、
、fail和attempts，這4個參數分別是錯誤物件、重新載入的函數、載入程式結束的函數、已經重試的次數。
<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>以上是Vue3中的非同步元件defineAsyncComponentAPI怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
