vue watch用法

 

vue watch 有三种用法

1. 直接写一个监听处理函数，当每次监听到 路由发生变化时，执行函数
2. 监听对象：{handler(){},immediate:false, deep:false}

• 子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
• deep属性对对象进行深度监听

 watch :{
    //函数
  　'$route': function (to, from) {
       this.initPage();
　　},
    //对象:当只需要对监听对象中某一个属性进行监听时候，可以做如下优化
    //使用字符串
    '$route':{
        handler(to, from){
            this.initPage();
        },
        immediate:false, //子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
    },
     '$route':{
        handler(to, from){
            this.initPage();
        },
        immediate:false, //子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
        deep:true, //普通的watch方法无法监听到对象内部属性的改变，此时用deep属性进行深度监听。
    }
},