Vue深度监听

Vue深度监听

Vue框架中监听一般写法为:

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

当监听对象的属性时:

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

如果需要监听整个对象时：

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