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