控制臺(tái)輸出：父組件中的age值為：2子組件中的age值為：1父組件改變age值后：5毫秒，子組件才監(jiān)控到變化，變化前age:1,變化后age:2,此時(shí)子組件中的age值為:2父組件中的age值為：3子組件中的age值為：2父組件改變age值后：1毫秒，子組件才監(jiān)控到變化，變化前age:2,變化后age:3,此時(shí)子組件中的age值為:3
2 回答
胡子哥哥
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊
只說(shuō)說(shuō)結(jié)果為什么是這樣子
請(qǐng)考慮如下同步代碼，那下面的代碼會(huì)發(fā)生什么?watch3遍嗎?不，通常來(lái)說(shuō)，用戶并不更新中間變了什么值，值關(guān)心一次marcotask最后的值變成了什么樣。
this.age++this.age++this.age++
所以vue是怎么做的呢，放microtask里。scheduler.js#L176
當(dāng)然如果你需要同步更新子組件也不是不可以，加上Vue.config.async = false，但這個(gè)特性很快也會(huì)被移除。Vue-config-async-移除
蕭十郎
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊
我理解著應(yīng)該是子組件的age和父組件的age應(yīng)該是同一個(gè)值，父組件值改變了，子組件瞬間改變
那你理解錯(cuò)了，如果按你所說(shuō)的父子組件的age指向同一個(gè)值的話，vue的子組件也不需要使用$emit()事件來(lái)跟父組件通訊了。至于vue為什么要這么做，好像教程里也有寫。
單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。額外的，每次父級(jí)組件發(fā)生更新時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。
添加回答
舉報(bào)
0/150
提交
取消