? ? ? ? 在實際項目中遇到了一種情況,就是頁面的選擇框是在頁面一創(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()。