大家都知道，Vue項目中對數據的監聽，提供了一個很好的鉤子watch，watch可以極其方便的監聽我們常用數據類型值的變化，但通常當我們想監聽一個對象中，某個屬性值的變化時，很難達到我們預期的效果。那么如何實現對象屬性的深度監聽呢？

?vue中提供了在watch監聽時設置deep:true 就可以實現對對象的深度監聽;

• • 　demo:???https://run.iviewui.com/oW2m2Jo7

• • 　直接監聽對象--代碼如下：? 1 watch:{ 2 obj:{ //監聽的對象 3 deep:true, //深度監聽設置為 true 4 handler:function(newV,oldV){ 5 console.log('watch中：',newV) 6 } 7 } 8 }

• • 　監聽對象下某個屬性--代碼如下： data () {return {obj:{name:'夜空中最亮的星星',age:18}}},watch:{'obj.name':{deep:true,handler:function(newV,oldV){console.log('watch中：',newV)}}}

2.利用computed配合watch實現單個屬性的深度監聽；

• • 　demo:??https://run.iviewui.com/7zwv09qd

• • 　代碼如下：? 1 data () { 2 return { 3 obj:{ 4 name:'夜空中最亮的星星', 5 age:18 6 } 7 } 8 }, 9 computed:{ 10 name(){ 11 return this.obj.name; 12 } 13 }, 14 watch:{ 15 name(newV){ 16 console.log('watch中name為：',newV) 17 } 18 }

    ?

?

轉載于:https://www.cnblogs.com/yuzhongyu/p/10444043.html

總結

以上是生活随笔為你收集整理的vue中如何深度监听一个对象？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。