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

這樣就可以實時的監聽到這個數據的變化