vue 是如何深度监听data的变化的

Posted 2023-03-29

参考技术A

1、重写数组原型方法
2、observer 函数中，若属性为数组，则更改数组属性的 proto 为重写后的数组对象

1、深度监听，需要递归到底，一次性计算量大
2、新增属性、删除属性，监听不到
3、无法监听数组，需要改写数组原生方法，然后改变数组的原型

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

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

1.  vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

• • 　demo:   https://run.iviewui.com/oW2m2Jo7

• • 　直接监听对象--代码如下： 

    1 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实现单个属性的深度监听；

• • 　demo:  https://run.iviewui.com/7zwv09qd

• • 　代码如下： 

     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     }