vue watch監聽對象及對應值的變化

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

https://www.cnblogs.com/my466879168/p/12430648.html

 

 

2.設置對象不變化的解決

1. 通過vue的this.$set(object,key,value)
2. 通過Object.assign()重新創建一個對象，例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })