使用watch监听数组或对象时, 发现返回的新旧值是一样的, 官方文档给出了答案 :
在这里插入图片描述
这需要使用到 this.$set方法 , 它接受三个参数 : (object / array , properyName / index , value) ,
看下实例 :
在 data中命名一个对象 a , 一个数组 b :

data () {
	retutn {
		a : {name : 'lily', age : 18} ,
		b : [
			{name : '小明' , age : 14} ,
			{name : '小红' , age : 15}
		]
	}
} , 

在methods中对 a , b 进行操作 :

methods : {
	set() {
		this.$set(a , 'age' , 20);
		this.$set(b, 1 , {name : '小红' , age : 16} ;
	}
}

在computed监听新变量 , 一定要用JSON.parse 和 JSON.stringify 转化一下, 不然watch监听时返回的新旧值还是一样的 .

computed : {
	newA : function () {
		return JSON.parse(JSON.stringify(this.a))
	} , 
	newB : function () {
		return JSON.parse(JSON.stringify(this.b))
	}
}

watch监听 , handler函数的两种写法都是可以的, 但是不能使用箭头函数 .

watch : {
	newA : {
		handler : function (newVal, oldVal) {
			console.log(newVal,oldVal)
		},
		immediate : true //初始化页面后立即监听
	} , 
	newB : {
		handler (newVal , oldVal) {
			console.log(newVal , oldVal)
		} ,
		immediate : true
	}
	
}

触发set方法后 , 最后打印的结果 :
在这里插入图片描述
完结 , 撒花✿✿ヽ(°▽°)ノ✿

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐