vue中的async created()

? ? ? ? 在實際項目中遇到了一種情況,就是頁面的選擇框是在頁面一創(chuàng)建時就得創(chuàng)建,因此顯然是需要寫在created()鉤子函數(shù)中的。然后在項目中,這里選擇框中的具體選擇項不是固定的,而是從服務(wù)器請求過來的,因此需要涉及到異步請求的問題,也就是說要用到async/await,所以這里不再是created,而是async created(),這時候父子組件的執(zhí)行順序就發(fā)生了改變。下面通過簡單的例子來對比輸出結(jié)果。

1、首先來看看不加異步情況下的結(jié)果:

由控制臺可以看出,先執(zhí)行完了父組件的created()后再去執(zhí)行子組件的created()。這里v-if="pM"目前無任何影響。

2、當(dāng)加上了異步,但是不加v-if="pM"時:

可以看出,這里父組件async created()中的代碼還未執(zhí)行完(異步代碼還未執(zhí)行)就去執(zhí)行子組created()中的代碼了,也就是說先執(zhí)行完父組件async created()中的同步代碼,然后去執(zhí)行子組件created()中的代碼,最后再執(zhí)行父組件中的異步代碼。這樣顯然是不合適的,父組件異步代碼還未執(zhí)行,子組件自然也就拿不到值,所以輸出為null。

3、當(dāng)加上了異步,并且加上v-if="pM"時:

可以看到,當(dāng)加上v-if="pM"后,只有父組件async created()中的異步代碼執(zhí)行完,將值給到pM后,子組件才會執(zhí)行。因此可以看出執(zhí)行順序又回到了剛開始時,"先執(zhí)行完父組件的created()"中的代碼再執(zhí)行子組件created()中的代碼。為什么這里會加引號,因為準(zhǔn)確來說也不能是執(zhí)行完父組件async created()中的代碼(同步+異步),而是子組件中要用到父組件async created()中異步代碼的返回值,保證這部分異步代碼執(zhí)行完,才能去執(zhí)行子組件的created()。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、課程介紹 https://vuejs.lipengzhou.com/ 內(nèi)容 使用 Vue.js 系列技術(shù)棧進(jìn)行...
    她說東京很熱閱讀 319評論 0 0
  • vue文檔 一、課程介紹 https://vuejs.lipengzhou.com/ 內(nèi)容 使用 Vue.js 系...
    前端陳陳陳閱讀 311評論 0 1
  • 夜鶯2517閱讀 128,210評論 1 9
  • 版本:ios 1.2.1 亮點: 1.app角標(biāo)可以實時更新天氣溫度或選擇空氣質(zhì)量,建議處女座就不要選了,不然老想...
    我就是沉沉閱讀 7,505評論 1 6
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月,有人笑有人哭,有人歡樂有人憂愁,有人驚喜有人失落,有的覺得收獲滿滿有...
    陌忘宇閱讀 8,879評論 28 54

友情鏈接更多精彩內(nèi)容