Vue监控器watch的全面解析

分手后的思念是犯贱 2023-02-28 01:20 83阅读 0赞

**前言**

前面讲到了计算属性computed，这次讲的是监控器watch，主要任务就是监控变量的变化

**正文**

watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

**watch的特点：**

1.当变量变化时调用函数  
2.如果不设置immediate则在初始绑定值时不会执行

watch有两个选项：

1.deep选项：表示深层遍历，当需要监控对象内部值的变化时，可以在选项参数中指定 deep: true。注意监听数组的变动不需要这么做

2.immediate选项：如果在选项参数中指定 immediate: true，将立即触发监控中变量的函数（如果我们需要在最初绑定值的时候也执行监控函数，就需要用到immediate属性）

watch的简单用法：

watch:{// 监听stuName的变化情况
        stuName: function(newVal, oldVal){//stuName是data的return返回对象中的数组变量，newVal是属性变化后的值，oldVal是属性变化前的值
            console.log(newVal,oldVal);
        }
    }

watch中的键也可以是$route之类的的实例属性

watch: {
          '$route': function(newVal, oldVal){
                console.log(newVal,oldVal);
          }
    }

watch对象的值也可以是方法名

watch: {
          dataName: 'getPath'
    }，
    methods: {
          getPath:function(){}
    }

当watch监控对象时有两种方法：

方法一：（在只监控对象内某一属性变化时使用）

watch:{
        'obj.a':{    //加引号监听对象里的属性
            handler(newValue,oldValue){
                console.log('obje changed')
            }
        }
    }

方法二：（当需要监控对象的所有属性变化时使用）

watch:{
        obj:{
            handler(newValue,oldValue){//此函数名是vue提供的
                console.log('obj changed')
            },
            deep:true
        }
    }