Vue监控器watch的全面解析

前言

前面讲到了计算属性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
    }
}