watch监测的使用方式


首先确认 watch是一个对象,一定要当成对象来用。 对象就有键,有值。

  键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量。

  值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

  值也可以是函数名:不过这个函数名要用单引号来包裹。

  第三种情况厉害了。 值是包括选项的对象:选项包括有三个。

  1、第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。

  2、第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)

  3、第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数

  数据类型 queryData: {   name: '',   creator: '',   selectedStatus: '',   time: [], },

1.监测非引用类型和引用类型非子层变量的方式:time属性如果变动无法监测到

       watch:{

            queryData:{

                handler:function(val,oldval){

               }

            }

       }

2.监测引用类型子层变量的方式:time属性如果变动可以被监测到,但是比较浪费性能

       watch:{

            queryData:{

                handler:function(val,oldval){

                },

                deep:true

            }

       }

3.监测引用类型子层变量的方式:time属性如果变动可以被监测到,不浪费性能

       watch:{

            'queryData.name':{

                handler:function(val,oldval){

                },

            }

       }

4.巧用计算属性监测子层属性:(computed+watch)

    

computed: {    getName: function() {        return this.queryData.name    } }, watch: {    getName: {      handler: function(val,oldval) {          //do something      },    } }

本篇博客整理自:https://www.jb51.net/article/161014.htm

                             https://www.cnblogs.com/goloving/p/8893073.html