vue中提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue.
顾名思义,这两个对象就是对象发生变化前后的值。
但是在使用过程中我发现这两个值并不总是预期的。
定义data的值
data: {
arr: [{
name: '笨笨',
address: '上海'
}, {
name: '笨笨熊',
address: '北京'
}],
obj: {
name: '呆呆',
address: '苏州'
},
str: '哈哈哈'
}
定义watch
watch: {
arr: function(newValue, oldValue) {
console.log(newValue, oldValue)
console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
},
obj: function(newValue, oldValue) {
console.log(newValue, oldValue)
console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
},
str: function(newValue, oldValue) {
console.log(newValue, oldValue)
console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
},
}
定义事件触发
methods: {
test() {
this.arr.push({
name: 9
})
this.$set(this.obj, 'i', 0)
this.str = ''
},
test1() {
this.arr = [{
name: '000'
}]
this.obj = {
name: 999
}
this.str = '123'
}
}
测试结果为
对数组进行push操作和对Obj进行$set操作,虽然都可能触发watch事件,但是在callback返回的结果中,oldValue和newValue相同。字符串对象如预期返回
在对数组和Obj统一进行赋值操作时,watch触发并且oldValue和newValue如预期返回
关于watch的其他测试可以参考我之前的文章
vue中正确的使用watch进行监听
测试地址(测试时请打开控制台)
https://zuank.github.io/notes...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。