Vue由浅入深系列(二)详解Watch侦听器

watch监听器主要是用来监听变量的变化，而后经过对变量的监听，在钩子函数中写入相应的操做。

1.对于普通变量的监听

• 比方说要对data中的count变量进行监听，其中有两个回调参数，一个是新的值，一个是旧的值，即改变后和改变以前的值

export default {
    name: "Test",
    data(){
        return{
            count:0,
        }
    },
    watch:{
        count(newValue,oldValue){
            //do something
        }
    },
}
复制代码

2.对于对象的监听

• 若是咱们监听的是一个对象，会发现执行this.queryList.name='jack',是没法触发watch监听的

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:'',
            }
        }
    },
    watch:{
        queryList(newValue,oldValue){
            //do something
        }
    },
}
复制代码

• 这时候就须要用到deep属性进行深度监听，监听器会一层层的往下遍历，给对象的全部属性都加上这个监听器，可是这样性能开销就会很是大了，任何修改queryList里面任何一个属性都会触发这个监听器里的handler。

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:'',
            }
        }
    },
    watch:{
      queryList:{
          handle(newValue,oldValue){
            //do something
          },
          deep:true,
      }
    },
}
复制代码

• 可是有的时候，比方说我只想监听queryList.name的变化，对于queryList.count不须要监听，那么咱们能够采用下面的这种写法，能作到只对这个对象里的特定属性进行属性监听的同时，相比于监听整个对象而言有更多的性能提高

export default {
    name: "Test",
    data(){
        return{
            queryList:{
                count:0,
                name:''
            }
        }
    },
    watch:{
      'queryList.name':{
          handle(newValue,oldValue){
            //do something
          },
      }
    },
}
复制代码

3.在首次绑定的时候当即触发监听

• 比方说是文章的详情页面，根据文章的id渲染相应的文章详情，经过对路由信息$route.query.id进行监听,而后调用相应的接口获取数据，固然能够在created或者mounted生命周期中写入事件，但若是只经过watch实现，咱们一样也能够作到，那就是使用watch的immediate属性，设置为true，无论这个值是否发生过改变，就会在初始化之后当即先去执行里面的handler方法

watch:{
  '$route.query.id':{
      handle(newValue,oldValue){
        //do something
      },
      immediate:true
  }
},
复制代码