使用$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)都會打印}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。