Vue.js的watch默认情况下不能检测到对象的属性或者数组的元素的改变。因此就有了几种方法用于watch,推荐第二种:

第一种:
优点:可以检测到对象和数组的所有元素变动
缺点:当数据较大时,性能开销大

//遍历数组
watch:{
	param:{
		handler(){
			//每当param中的属性/元素发生变化,遍历param
			//do something
		},
		deep:true
	}
}

//检测指定对象属性
watch:{
	'param.name':{
		handler(name)(){
			//监视name属性
		},
		//可加可不加
		deep:true
	}
}

第二种:
通过vue提供的Vue.set(obj , key , value)触发watch监视的动作。
首先解决数据与DOM树绑定,Vue提供计算属性的get、set方法。其次就是触发watch。

//例:绑定select
<select v-model="dateChange">
	<option value="a">A</option>
	<option value="b">B</option>
</select>

//vue代码
···
data:function(){
	return {
		data:{"selectValue":"a"}
	}
},
computed:{
	dateChange:{
		get:function(){
			return this.data.selectValue;
		},
		set:function(value){
			this.$set(this.data , "selectValue" , value)
		}
	}
},
watch:{
	'data.selectValue'(){
		//do something
	}
}
Logo

前往低代码交流专区

更多推荐