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
		}
	}
}

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