溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用$watch監聽的時候，監聽的數據是一個對象的時候，要注意幾點：
監聽組件內某個對象里面的某項屬性時，不要監聽對象，直接監聽對象里面的屬性（深度監聽），只有直接監聽這個對象里面的屬性，只更新對象里面的屬性時也能直接監聽到此數組的變化。
如
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）會打印
}
數據驅動基于Object.defineProperty()這個功能進行實現，在vue中的數據對象就用樹來表示，樹的每一個葉子節點都會用Object.defineProperty()來定義get/set方法，而在set方法執行的時候會執行watch方法，實現數據的監聽。
我們可以監聽樹的任一葉子節點，當葉子節點數據發生變化的時候，會執行此葉子節點中監聽的方法，同時下級以及下下級甚至更下級的葉子節點的監聽方法也會執行（前提是對應的葉子節點數據也有改變).
如下
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(){
//下面的例子一個一個實驗，不要放在一起運行，會造成結果錯誤。當然也可以自己驗證如何放在一起也能驗證下面的結果是正確的。
this.$set(this.msgs,"list",[1,2,3,4]);//(1)(3)不會打印，（2）會打印
//分析：這個是更新msgs樹中list葉子節點的數據，會觸發到 “msgs.list”的監聽方法，從而(2)被打印
this.$set(this,"msgs",{list:[1,2,3,5]});//(1)(2)(3)都會打印
//分析：這個是更新msgs中的根節點的數據，會觸發“msgs”的監聽方法，因根節點下面還有子節點，會繼續往下遍歷，發現list節點的數據也隨之改變，由[1,2,3]=>[1,2,3,4]，觸發了“msgs.list”的監聽方法，同理msg節點的數據從 "1"=>"undefined",也會觸發“msgs.msg”的監聽方法，所以(1)(2)(3)都會打印。
this.$set(this,"msgs",{list:[1,2,3,4],msg:"1"});//(1)(2)會打印，(3)不會打印
//分析：這個與上面不同的是msg節點的內容并沒有改變，一直都是“1”，所以不會觸發“msgs.msg”的監聽方法，所以(3)沒有打印，(1)(2)都會打印
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
