watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}
//复制代码注意到handler了吗，我们给 firstName 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
//而immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
watch:{
            // 通过这种语法来watch就行，文档里有。。。看需求，还可以直接watch data，使用deep:true来深度观察
            'data.status':{
                handler: function(val,oldVal){
                    //要执行的任务
                    //这里不知道怎么才能修改到this.data的数据，有知道的麻烦告知
                    //现在知道的就是通过直接修改Store.state的方式来更新数据，当然效果和修改this.data是一样的
                },
                // 深度观察
                deep:true
            },
function(val) {
      if (val) {
        this.dataForm.hdTicketForm.validityPeriodDisabled = true;
      } else {
        this.dataForm.hdTicketForm.validityPeriodDisabled = false;
      }
    },
        },

// 或：
watch: {
    msg: {
        handler(newValue, oldValue) {
            console.log(newValue)
        },
        deep: true
    }
}

// 或 借助 computed 计算属性
computed: {
    channel() {
        return this.msg.channel
    }
},
watch:{
    channel(newValue, oldValue) {
        console.log('new: %s, old: %s', newval, oldVal)
        //这里面可以执行一旦监听的值发生变化你想做的操作
    }
}

注销watch

为什么要注销 watch？因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

const app = new Vue({
  template: '<div id="root">{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text(newVal, oldVal){
      console.log(`${newVal} : ${oldVal}`);
    }
  }
});

但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

unWatch(); // 手动注销watch

app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。

链接: https://www.fly63.com/article/detial/5838