如下是一個(gè)子組件中的部分代碼，當(dāng)在父組件中給amount賦一個(gè)值的時(shí)候，alert彈出順序?yàn)槭裁词?'created' => 'init: 1' => 1 => 'init: 1' => 2 => init: 2' => 'init: 2' data() {return { currentLimitType : ''}},watch: {amount(val) {
alert(1) if (this.currentLimitType === '') { this.initData()
}
alert(2)
... // 巴拉巴拉一堆，我們想要處理的邏輯},created() {alert('created')this.initData()},methods: {async initData() {
alert('init: 1') const res = await queryOnceLimit() // 封裝好的ajax請(qǐng)求接口
alert('init: 2') this.handlInitData(res, () => { this.computedCurrentLimitType() // 執(zhí)行完這個(gè)方法之后currentLimitType會(huì)被賦值
this.$emit('moneyLimitOk')
})
},
1 回答
DIEA
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊
這應(yīng)該跟你created和watch沒(méi)關(guān)系，你的疑惑都是因?yàn)?code>async initData()這個(gè)方法是異步導(dǎo)致的。
你把異步的操作去掉，執(zhí)行created和watch你就能清楚地發(fā)現(xiàn)執(zhí)行順序了。
另外，你也沒(méi)說(shuō)你希望看到的是什么結(jié)果啊？？你的問(wèn)題疑惑是執(zhí)行順序混亂嗎？
更新一下，雖然你給的業(yè)務(wù)場(chǎng)景還不夠清楚。但是還可以分析整個(gè)過(guò)程：
父組件
created完成執(zhí)行子組件的created，彈出alert('created')。同時(shí)進(jìn)到async/await的initData方法中去。initData方法進(jìn)入，觸發(fā)alert('init: 1')，同時(shí)由于await的異步等待特性，下面的方法會(huì)被掛起，只有等待它ajax請(qǐng)求完返回才會(huì)繼續(xù)執(zhí)行。剛剛是子組件創(chuàng)建完，進(jìn)到方法去，由于異步掛起，程序不會(huì)閑著，繼續(xù)走。掛載（mounted）了子組件后，掛載父組件（你說(shuō)你在父組件通過(guò)refs改變了值），所以這時(shí)候觸發(fā)子組件的
watch，也就是彈出了alert（1）。看你這一句判斷
if (this.currentLimitType === '') {this.initData()}可以看到又進(jìn)到initData函數(shù)里面了，又會(huì)執(zhí)行alert('init: 1')，由于又遇到異步了，那么繼續(xù)走會(huì)執(zhí)行alert(2)。此時(shí)之前的異步請(qǐng)求成功返回?cái)?shù)據(jù)，彈出alert('init: 2')，那么后續(xù)還有一個(gè)請(qǐng)求沒(méi)有返回，繼續(xù)等待即可，過(guò)程同上，大概過(guò)程就是這樣，聯(lián)系起來(lái)就是這樣：
created => init: 1 => 1 => init: 1 => 2 => init: 2
添加回答
舉報(bào)
0/150
提交
取消