Vue watch 的handler,immediate,deep属性

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化  不用handler的简洁写法
    num(newValue, oldValue) {
      this.sum= newValue;
    }
    // 也可以使用handler方法写
    num:{
        handler(newValue, oldValue) {
            this.sum = newValue;
        }
    }
  } 
})

handler方法和immediate/deep属性

watch的特点就是，刚挂载的时候是不执行的，只有挂载完成之后的变化才会执行。如果我们想要初次挂载的时候就l执行，则需要这么写：

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler(newName, oldName) {
          this.sum= newName;
        },
        immediate: true,
    }
  } 
})

这里可以看出我们添加了一个handler方法，其实watch的语法中是一直有这个handler方法的，只是没有添加immediate和deep属性的时候可以省略。

当我们想监听一个对象中的某个属性的时候，再用上面的写法是监听不到的，由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下上面的 handler 只会监听对象的的引用变化，我们只有给对象重新赋值的时候它才会监听到。

那如何才能监听到对象的具体一个属性？这就是deep的作用。

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
    person:{
        name:'哈哈'
    }
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler(newName, oldName) {
          this.sum= newName;
        },
        immediate: true,
    },
    person:{
        handler(newValue){
            console.log('person的name发生了变化')
        },
        deep: true, // 默认是false
    }
  } 
})

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销会非常大，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

字符串形式监听

如果我们只想监听obj.a的变化,不监听obj对象的其他属性上面可以优化一下，
使用字符串形式监听。

watch: {
    'person.name':{
        handler(newValue){
            console.log('person的name发生了变化')
        },
        immediate: true // 默认false
        //deep: true, // 默认是false
    }
  } 

这样Vue.js才会一层一层解析下去，直到遇到属性a，然后才给a设置监听函数。

 watch监听路由

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面 变化后的路由
      console.log(from); //from表示来自于哪个界面  变化前的路由
    }
  }


// 或者直接监听路由的属性path
watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
 }