vue中如何深度监听一个对象？

来源：雨中愚-vue中如何深度监听一个对象？

大家都知道，Vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。那么如何实现对象属性的深度监听呢？

1. vue中提供了在watch监听时设置deep:true就可以实现对对象的深度监听;

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

• 直接监听对象--代码如下：

watch:{ 
    obj:{ //监听的对象
        deep:true, //深度监听设置为 true
        handler:function(newV,oldV){
            console.log('watch中：',newV) 
        }
    }
}

• 监听对象下某个属性--代码如下：

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

• 代码如下：

data () {
      return {
        obj:{
          name:'夜空中最亮的星星',
          age:18
        }
      }
    },
    computed:{
      name(){
        return this.obj.name;
      }
    },
    watch:{
      name(newV){
        console.log('watch中name为：',newV)
    }
}