大家都知道，Vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。那么如何实现对象属性的深度监听呢？ vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; demo:/oW2m2Jo7 直接监听对象--代码如下：
1 watch:{2 obj:{ //监听的对象3deep:true, //深度监听设置为 true4handler: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:/7zwv09qd 代码如下：
1data () { 2 return { 3 obj:{ 4 name:'夜空中最亮的星星', 5 age:18 6 } 7 } 8}, 9computed:{10 name(){11 return this.obj.name;12 }13},14watch:{15 name(newV){16 console.log('watch中name为：',newV)17 }18}
如果觉得《vue中如何深度监听一个对象？》对你有帮助，请点赞、收藏，并留下你的观点哦！
