於vue hook 中使用async mounted問題

Willy
May 30, 2022

由於 hook只會在指定時間執行(生命周期之中),使用非同步方法...等是不會影響周期執行,所以就算你加上了async await 也不會等promise的程式跑完,才去執行下一個hook。

所以mounted時會變成畫面渲染完才會執行async mounted 中 await的程式,若畫面中資料是需要等待API回傳,且結構比較深層就有可能發生錯誤,或者是資料回來後沒能成功渲染在畫面上。

畫面渲染會抓取obj.zh.msg
假設資料一秒後回來
因為先渲染畫面資料還沒回來找不到msg的資料

這時候就可以利用v-if的作法,在async mounted執行完後,讓一個dataReady變成true,再讓畫面渲染,就可成功達到async mounted功能。

增加v-if判斷後才渲染畫面
在mounted中增加dataReady = true (預設false)

參考資料

--

--

Willy
Willy

Written by Willy

前端修練筆記本,記錄一些踩雷及學習過程,希望能順便幫助一些,在學習或開發路上卡關的人們。

No responses yet