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是数组变量，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

    }

}

巴特西

Vue监控器watch的全面解析

最新文章

热门文章