Vue watch怎么深度监听对象变化 ?
在 Vue 中,watch
选项用于监听数据的变化,但默认情况下,watch
只能监听到数据的浅层变化,也就是说,如果你监听的是一个对象,当这个对象的属性被修改时,watch
是无法检测到的。
如果你想深度监听一个对象,即监听对象内部属性的变化,你可以在 watch
选项中设置 deep: true
。例如:
data() {
return {
obj: {
a: 1,
b: 2,
},
};
},
watch: {
obj: {
handler(newValue, oldValue) {
console.log('obj changed');
},
deep: true,
},
},
在这个例子中,无论是 obj
本身,还是 obj
的属性 a
和 b
发生变化,watch
都能检测到,并触发相应的处理函数。
需要注意的是,深度监听需要消耗更多的计算资源,所以在不需要的情况下,应避免使用深度监听。