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
  }
},