要使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如下:

<template>
  <div class="watchPage">
    <h1>child: {{child}}<input type="text" v-model="child"/></h1>
    <h1>person.name: {{person.name}}<input type="text" v-model="person.name"/></h1>
  </div>
</template>

<script lang="ts">
// 从vue-property-decorator中引入Component、Watch、Vue
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class WatchPage extends Vue {
  child = ''
  person = {
    name: 'zxx'
  }
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {
    console.log(val, oldVal);
  }

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) {
    console.log(val, oldVal);
  }
}
</script>

以上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

 

Logo

前往低代码交流专区

更多推荐