**問題描述 **在開發(fā) vue3 中，因?yàn)橥ㄟ^接口數(shù)據(jù)為異步函數(shù)獲取，導(dǎo)致最后數(shù)據(jù)無法成功賦值進(jìn) return 中的數(shù)據(jù)。所以需要setup函數(shù)異步轉(zhuǎn)同步，后設(shè)置了async 后異步轉(zhuǎn)同步，結(jié)果導(dǎo)致頁面空白不顯示。

解決問題在Vue3中，如果當(dāng)前組件的setup使用了async/await，那么其調(diào)用組件的父組件的外層需要嵌套一個(gè)suspense標(biāo)簽，例如：

異步組件：

子組件

HTML

<template>
? ? <div>······</div>
</template>

JS

export default {
? ? async setup () {
? ? ? ? let ···
? ? ? ? // 接口A
? ? ? ? await getAAA().then(() => {
? ? ? ? ? ? ···
? ? ? ? }).catch(() => {
? ? ? ? ? ? ···
? ? ? ? })
? ? ? ? // 接口B
? ? ? ? await getBBB().then(() => {
? ? ? ? ? ? ···
? ? ? ? }).catch(() => {
? ? ? ? ? ? ···
? ? ? ? })
? ? ? ? return {
? ? ? ? ? ? ···
? ? ? ? }
? ? }
}

父組件中需要單獨(dú)設(shè)置

<suspense>
? ? <async-component/>
</suspense>

使用vue3中的異步

在vue3中使用ajax請(qǐng)求數(shù)據(jù)的時(shí)候，由于不能在setup前面使用async，使用后會(huì)導(dǎo)致return的返回值全部變成promise的返回值，所以在執(zhí)行的時(shí)候得使用一些特定的鉤子來發(fā)送請(qǐng)求

和vue2一樣，選擇在dom節(jié)點(diǎn)渲染完成的時(shí)候發(fā)送請(qǐng)求，

(getdata為封裝的數(shù)據(jù))

這樣寫完之后會(huì)發(fā)現(xiàn)

頁面顯示沒有數(shù)據(jù)，但是tableData卻可以顯示數(shù)來數(shù)據(jù)，但是因?yàn)関ue的承諾是相應(yīng)式數(shù)據(jù)發(fā)生改變，頁面就會(huì)重新渲染，所以是tabledata的響應(yīng)式被替換成了不能響應(yīng)的數(shù)據(jù)

把數(shù)據(jù)壓入原來的設(shè)置成響應(yīng)式的數(shù)組就可以檢測(cè)到了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue插槽_特殊特性slot,slot-scope與指令v-slot說明
這篇文章主要介紹了Vue插槽_特殊特性slot,slot-scope與指令v-slot說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue 基礎(chǔ)語法之計(jì)算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計(jì)算屬性就是 Vue 實(shí)例選項(xiàng)中的 computed，computed 的值是一個(gè)對(duì)象類型，對(duì)象中的屬性值為函數(shù)，而且這個(gè)函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計(jì)算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下
2022-11-11
vue & vue Cli 版本及對(duì)應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對(duì)應(yīng)關(guān)系，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中axios請(qǐng)求的封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue中axios請(qǐng)求封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧要的朋友可以參考下
2019-03-03
vue獲取參數(shù)的幾種方式總結(jié)
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue2之簡(jiǎn)易的pc端短信驗(yàn)證碼的問題及處理方法
這篇文章主要介紹了vue2之簡(jiǎn)易的pc端短信驗(yàn)證碼的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例
這篇文章主要介紹了vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下
2023-08-08
Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁功能
這篇文章主要介紹了Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁功能,需要的朋友可以參考下
2017-08-08