码迷,mamicode.com
首页 > 其他好文 > 详细

vue中如何深度监听一个对象?

时间:2021-06-17 16:54:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:new   obj   star   span   bsp   钩子   数据   class   style   

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
  1.  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     }

 

 

 

 

vue中如何深度监听一个对象?

标签:new   obj   star   span   bsp   钩子   数据   class   style   

原文地址:https://www.cnblogs.com/CIBud/p/14892308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!