首页 > 其他分享 >Vue深度监听

Vue深度监听

时间:2022-10-21 14:48:35浏览次数:90  
标签:Vue console log newVal oldVal handler 深度 监听

1.监听一般写法

watch:{
	a(newVal,oldVal){
		console.log(newVal);
	}
}

2.当监听对象属性时

watch:{
	"obj.name"(newVal,oldVal){
		console.log(newVal);
	}
}

3.如果要监听整个对象

watch:{
	obj:{
		deep:true,//true为进行深度监听,false为不进行深度监听
		handler(newVal){
			console.log(newVal);
		}
	}
}

监听整个对象是一个很消耗性能的操作,当属性改变,整个对象都会监听。

handler函数中,可以发现handler(newVal,oldVal)中的newVal与oldVal是一样的;如果我们需要使用到未改变之前的值时,就要使用Vue的computed属性了

computed:{
	needWatObj(){
		return JSON.pares(JSON.stringify(this.obj));//深拷贝需要监听的对象数据
	}
},
watch(){
	needWatObj:{
		deep:true,
		handler(newVal,oldVal){
			console.log("已改变的值=>",newVal);
			console.log("改变前的值=>",oldVal);
		}
	}
}

标签:Vue,console,log,newVal,oldVal,handler,深度,监听
From: https://www.cnblogs.com/regit/p/16813399.html

相关文章