大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;
demo: watch监听时设置deep:true
直接监听对象–代码如下:
watch:{
obj:{ //监听的对象
deep:true, //深度监听设置为 true
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
监听对象下某个属性–代码如下:
data () {
return {
obj:{
name:'夜空中最亮的星星',
age:18
}
}
},
watch:{
'obj.name':{
deep:true,
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
2.利用computed配合watch实现单个属性的深度监听;
demo:利用computed配合watch实现单个属性的深度监听
data () {
return {
obj:{
name:'夜空中最亮的星星',
age:18
}
}
},
computed:{
name(){
return this.obj.name;
}
},
watch:{
name(newV){
console.log('watch中name为:',newV)
}
}