詳解vue2 $watch要注意的問題

更新時間：2017年09月08日 17:07:41 作者：風起時不要閉眼

本篇文章主要介紹了詳解vue2 $watch要注意的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

使用$watch監(jiān)聽的時候，監(jiān)聽的數據是一個對象的時候，要注意幾點：

監(jiān)聽組件內某個對象里面的某項屬性時，不要監(jiān)聽對象，直接監(jiān)聽對象里面的屬性（深度監(jiān)聽），只有直接監(jiān)聽這個對象里面的屬性，只更新對象里面的屬性時也能直接監(jiān)聽到此數組的變化。

如

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中的數據對象就用樹來表示，樹的每一個葉子節(jié)點都會用Object.defineProperty()來定義get/set方法，而在set方法執(zhí)行的時候會執(zhí)行watch方法，實現數據的監(jiān)聽。

我們可以監(jiān)聽樹的任一葉子節(jié)點，當葉子節(jié)點數據發(fā)生變化的時候，會執(zhí)行此葉子節(jié)點中監(jiān)聽的方法，同時下級以及下下級甚至更下級的葉子節(jié)點的監(jiān)聽方法也會執(zhí)行（前提是對應的葉子節(jié)點數據也有改變).

如下

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樹中l(wèi)ist葉子節(jié)點的數據，會觸發(fā)到 “msgs.list”的監(jiān)聽方法，從而(2)被打印
this.$set(this,"msgs",{list:[1,2,3,5]});//(1)(2)(3)都會打印
//分析：這個是更新msgs中的根節(jié)點的數據，會觸發(fā)“msgs”的監(jiān)聽方法，因根節(jié)點下面還有子節(jié)點，會繼續(xù)往下遍歷，發(fā)現list節(jié)點的數據也隨之改變，由[1,2,3]=>[1,2,3,4]，觸發(fā)了“msgs.list”的監(jiān)聽方法，同理msg節(jié)點的數據從 "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é)點的內容并沒有改變，一直都是“1”，所以不會觸發(fā)“msgs.msg”的監(jiān)聽方法，所以(3)沒有打印，(1)(2)都會打印
}

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

您可能感興趣的文章: