今天在项目实现中遇到了关于在Vue中watch监听对象失败的问题,背景是这样的:
我在VUE组件中的data里声明了一个空对象:
obj: { }
然后在某一个函数里面对obj添加某个对象:
obj.name = 'liu'
再在另一个函数里,对obj的name属性进行修改
obj.name = 'yang'
监听函数就是大家所熟知的下面这种写法:
watch: {
obj: {
handler: function(newValue) {
console.log(newValue);
},
deep: true
}
}
然而,这种方式根本监听不到obj对象中属性的改变,因为在data中的obj里是没有属性的,而受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。因此,只有把name属性一开始就放在obj对象里面才会深度监听到obj对象中属性的变化。
上面一种监听方式也可以写成下面这种形式:
watch: {
'obj.name' : {
handle(newValue) {
console.log(newValue);
},
deep: true
}
}