Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
1、vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。

直接监听对象–代码如下:

watch:{
	obj:{ //监听的对象
		deep:true, //深度监听设置为 true
		handler:function(newV,oldV){
			console.log('watch中:',newV)
		}
	}
}

监听对象下某个属性–代码如下:

data () {
	return {
	    obj: {
			name:'夜空中最亮的星星',
			age:18
	    }
	}
},
watch:{
	'obj.name': {
		deep:true,
		handler:function(newV,oldV){
			console.log('watch中:',newV)
		}
	}
}

2、利用computed配合watch实现单个属性的深度监听。

data() {
	return {
		obj:{
			name:'夜空中最亮的星星',
			age:18
		}
	}
},
computed: {
	name() {
		return this.obj.name;
	}
},
watch: {
	name(newV) {
		console.log('watch中name为:',newV)
	}
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐