您好,登錄后才能下訂單哦!
使用$watch監(jiān)聽的時候,監(jiān)聽的數(shù)據(jù)是一個對象的時候,要注意幾點:
監(jiān)聽組件內(nèi)某個對象里面的某項屬性時,不要監(jiān)聽對象,直接監(jiān)聽對象里面的屬性(深度監(jiān)聽),只有直接監(jiān)聽這個對象里面的屬性,只更新對象里面的屬性時也能直接監(jiān)聽到此數(shù)組的變化。
如
data(){ return { msgs : { list:[1,2,3] } } }, watch:{ msg(newVal,oldVal){ console.log(newVal);//(1) }, "msg.list":function(newVal,oldVal){ console.log(newVal)//(2) } }, mounted(){ this.$set(this.msg,"list",[1,2,3,4]);//(1)不會打印,(2)會打印 this.$set(this,"msg",{list:[1,2,3,4]}//(1)會打印,(2)會打印 }
數(shù)據(jù)驅(qū)動基于Object.defineProperty()這個功能進(jìn)行實現(xiàn),在vue中的數(shù)據(jù)對象就用樹來表示,樹的每一個葉子節(jié)點都會用Object.defineProperty()來定義get/set方法,而在set方法執(zhí)行的時候會執(zhí)行watch方法,實現(xiàn)數(shù)據(jù)的監(jiān)聽。
我們可以監(jiān)聽樹的任一葉子節(jié)點,當(dāng)葉子節(jié)點數(shù)據(jù)發(fā)生變化的時候,會執(zhí)行此葉子節(jié)點中監(jiān)聽的方法,同時下級以及下下級甚至更下級的葉子節(jié)點的監(jiān)聽方法也會執(zhí)行(前提是對應(yīng)的葉子節(jié)點數(shù)據(jù)也有改變).
如下
data(){ return { msgs:{ list:[1,2,3], msg:'1' } } }, watch:{ msgs(newVal,oldVal){ console.log(newVal);//(1) }, "msgs.list":function(newVal,oldVal){ console.log(newVal)//(2) } "msgs.msg":function(newVal,oldVal){ console.log(newVal)//(3) } }, mounted(){ //下面的例子一個一個實驗,不要放在一起運行,會造成結(jié)果錯誤。當(dāng)然也可以自己驗證如何放在一起也能驗證下面的結(jié)果是正確的。 this.$set(this.msgs,"list",[1,2,3,4]);//(1)(3)不會打印,(2)會打印 //分析:這個是更新msgs樹中l(wèi)ist葉子節(jié)點的數(shù)據(jù),會觸發(fā)到 “msgs.list”的監(jiān)聽方法,從而(2)被打印 this.$set(this,"msgs",{list:[1,2,3,5]});//(1)(2)(3)都會打印 //分析:這個是更新msgs中的根節(jié)點的數(shù)據(jù),會觸發(fā)“msgs”的監(jiān)聽方法,因根節(jié)點下面還有子節(jié)點,會繼續(xù)往下遍歷,發(fā)現(xiàn)list節(jié)點的數(shù)據(jù)也隨之改變,由[1,2,3]=>[1,2,3,4],觸發(fā)了“msgs.list”的監(jiān)聽方法,同理msg節(jié)點的數(shù)據(jù)從 "1"=>"undefined",也會觸發(fā)“msgs.msg”的監(jiān)聽方法,所以(1)(2)(3)都會打印。 this.$set(this,"msgs",{list:[1,2,3,4],msg:"1"});//(1)(2)會打印,(3)不會打印 //分析:這個與上面不同的是msg節(jié)點的內(nèi)容并沒有改變,一直都是“1”,所以不會觸發(fā)“msgs.msg”的監(jiān)聽方法,所以(3)沒有打印,(1)(2)都會打印 }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。