当监听的是对象属性,手动修改对象的某个属性值是会发现,监听并没有生效,此时我们需要用到watch的deep属性,当deep为true时它会一层层遍历给对象的所有属性都加上这个监听函数,这样可以检测到对象的每个属性变化,但是这样做会造成更大的性能开销。
data:{
obj:{
a:1
}
},
watch:{
obj:{
handler(newName,oldName){
//...
},
deep:true //为true,表示深度监听,这时候就能监测到a值变化
}
}
优化:可以使用字符串监听,即给对象会改变的属性指定该监听器,这样只有遇到该属性才会给其设置监听器,而不是给对象的所有属性都加上监听函数。
data:{
obj:{
a:1
}
},
watch:{
'obj.a':{
handler(newName,oldName){
//...
},
deep:true //为true,表示深度监听,这时候就能监测到a值变化
}
}
例如之前动态修改echarts配置属性中的data值
网友评论