vuejs 深度监听
data: { obj: { a: 123 } },
监听obj中a属性
watch: { 'obj.a': { handler(newName, oldName) { console.log('obj.a changed'); } } }
深度监听
watch: {
obj: {
handler(val, olVal) {
console.log('我变化了', val, olVal)
},
immediate: true,
deep: true
}
}
immediate:true代表如果在 wacth 里声明了 obj 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
deep,默认值是 false,代表是否深度监听
如果obj发生了变化,就会打印出val,olVal,但是他们打印出来的结果都是一样的,因为数据同源。虽然可以监听到他的变化,但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。
data: {
obj: {
a: 123
}
},
watch: {
testDataNew: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)
},
deep: true
}
},
computed: {
testDataNew() {
return JSON.parse(JSON.stringify(this.obj))
}
}
青春承载希望,奋斗成就未来