vue侦听器watch基本回顾

//watch的基础写法 D级
<div>
      <input type="text" v-model="first">
</div>
 
new Vue({
  el: '#root',
  data: {
    first: '11'
  },
  watch: {
    first(newName, oldName) { // 针对data中的数据进行侦听变化执行
      console.log(newName, oldName);
    }
  } 
})

上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化后打印新值和旧值

// handler方法和immediate属性  c级
watch: {
  first: {
    handler(newName, oldName) {
      console.log('一开始就执行了');
    },
    // 代表在wacth里声明了first这个方法之后立即先去执行handler方法
    immediate: true
  }
}

解释：
watch 最初绑定的时候是不会执行的，要等到数据改变时才执行监听。
immediate:true代表wacth 里声明了之后立即执行 执行handler的函数

// deep属性 B级
<div>
      <span>obj.name: {{obj.name}}</span>
      <span>obj.age: {{obj.age}}</span>
      <p>obj.age: <input type="text" v-model="obj.age"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      name: 'hahha',
      age: 16
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.age changed');
      },
      immediate: true,
      deep: true
    }
  } 
})

解释
当不存在deep:true;时，在输入框中输入数据视图改变obj.a的值时，我们发现是无效的，
默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。Vue 不能检测到对象内部属性的添加或删除。
watch 属性 deep，代表是否深度监听，deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

// deep:true性能开销会很大 通常可以这样写
watch: {
  'obj.age': {
    handler(newName, oldName) {
      console.log('obj.age changed');
    },
    immediate: true,
    // deep: true
  }
} 

//  watch监听路由 B级
watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/news/detailMessage"){
        console.log("消息详情");
      }
    }
  },

// 一般我通常使用watch对路由中携带的参数进行监听 
'$route.query.categoryId':{//根据categoryId的变化获取发件或者收件列表信息
         handler(val, oldVal){
           // 初始化列表变量
           this.messageSeach = '', // 是否携带查询参数
           this.pageSize= 12, // 页码
           this.pageNo= 1, // 每页的数量
           this.getMessage() // 根据categoryId if判断是发件人列表还是收件人列表
         },
         deep:true //true 深度监听
     }