大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;
//监听事件
watch: {
header:{
deep: true, // 深度监听
immediate: true, // 监听到后,立即执行 handler方法
handler (val) {
this.tableHeader = val
this.$nextTick(()=>{
this.$refs.GeneralTable.doLayout()
})
}
}
}
监听对象下某个属性--代码如下:
data () {
return {
obj:{
name:'夜空中最亮的星星',
age:18
}
}
},
watch:{
'obj.name':{
deep:true,
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
利用computed配合watch实现单个属性的深度监听;
data () {
return {
obj:{
name:'夜空中最亮的星星',
age:18
}
}
},
computed:{
name(){
return this.obj.name;
}
},
watch:{
'obj.name':{
deep:true,
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
网友评论