typescript如何使用watch?

作者站长头像
站长
· 阅读数 19

如何将下面的js版的watch,改成ts版:

watch: {
    checkVal: {
      handler: function (val) {
        if (val) {
          this.checkList.forEach((item) => {
            this.checkVal.forEach((i) => {
              if (i == item[this.idKey]) {
                this.checkRightList.push(item);
              }
            });
          });
          const res = new Map();
          this.checkRightList = this.checkRightList.filter(
            (a) => !res.has(a[this.idKey]) && res.set(a[this.idKey], 1)
          );
        }
      },
      deep: true,
    },

    showList: {
      handler: function (val) {
        if (val) {
          this.$emit('change', val);
        }
      },
      deep: true,
    },
  },
回复
1个回答
avatar
test
2024-07-04

可以看看这篇文章: https://github.com/kaorun343/vue-property-decorator

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}

  @Watch('person')
  @Watch('child')
  onPersonAndChildChanged() {}
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容