vue中watch监听一个对象中属性的变化

vue中监听某一对象的一个属性的变化

Vue提供了一个watch方法可以监听到某些data中数据的变化 如果说是一个对象中某个属性的变化也可以

rule:{
    name:"",
    age:""
}

watch:{
    rule:{
        handler:function(){
            //do something
        },
        deep:true
    }
}

deep设置为true的意思是修改rule中任何一个属性，都会执行handler这个方法，但是这样消耗比较大，对象嵌套过深的时候更加严重
有时候我们只是想知道对象中某一属性的变化的时候：

"rule.name":{
    handler:function(a,b){
    this.count++
    console.log(this.count)
  }
},

也可以使用计算属性来计算这个值：

computed: {
  getName: function() {
  return this.rule.name
 }
},
watch:{
    getName:{
        handler:function(){
            //do something
        }
    }
}

这样就可以实时的监听到这个数据的变化