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