Vue对象属性值发生变化的监听三种方法

监听info对象中的a属性值变化：<script>const vm = Vue({data() {return {b: true,info:{a: 1,b:2,c: 3}}}</srcipt>第一种方式：使用deep为了发现对象内部值的变化，可以在选项参数中指定 deep: true。

文章共288字 · 阅读需要大约1分钟

一键AI生成摘要，助你高效阅读

问答

Tand.

40970人浏览 · 2021-11-01 17:57:32

Tand. · 2021-11-01 17:57:32 发布

监听info对象中的a属性值变化：

<script>
		const vm = Vue({
		  data() {
		    return {
		      b: true,
		      info:{
		      		a: 1,
		      		b:2,
		      		c: 3
		      }
		      
		    }
		  }
</srcipt>

第一种方式：使用deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
只要info中的属性发生变化（可被监测到的），便会执行handler函数；
如果想监测具体的属性变化，如a变化时，才执行handler函数，则可以利用计算属性computed做中间层。

watch:{
	info:{
		handler(newVal){
			console.log(newVal);
		},
		deep: true
	}
}

第二种方式：watch结合computed，computed返回对象的的该属性，对computed的操作函数进行watch监听。

computed:{
	//该计算属性返回要监视的对象属性值
	infoa(){
		return this.info.a;
	}
},
watch:{
	//开始监听返回该对象属性值计算属性
	infoa: function(newVal, oldVal){
		console.log(newVal, oldVal);
	}
}

第三种方式：

watch:{
	'info.a'(newVal, oldVal){
		if(newVal != oldVal && newVal != ""){
			this.vDisable = false;
        　	var appName = newVal.split("-")[0]
        　	this.getVersionData(appName)
		}
	}
}