vue + ts 项目中watch的用法

 要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet

首先安装：

npm i -D vue-property-decorator

@Watch(path: string, options: WatchOptions = {}) 

@Watch装饰器接受两个参数：

• path: string类型，表示需要被监听的属性名；
• options?: WatchOptions = {} 包含两个属性： 

  immediate?: boolean 监听开始后是否立即调用该回调函数; 
  deep?: boolean 表示是否深度监听

使用Demo如下：

以上script中代码等同于：

export default {
  data() {
    return {
      child: '',
      person: {
        name: 'zxx'
      }
    }
  }
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged',
        immediate: true,
        deep: true,
      }
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {
      console.log(val ,oldVal);
    },
    onPersonChanged(val, oldVal) {
      console.log(val ,oldVal);
    }
  },
}

 参考资料： https://github.com/kaorun343/vue-property-decorator