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