如何在带有 Typescript 的 VueJs watch 中使用 Lodash 去抖动

Question

在 VueJS (Javascript) 中我可以这样做：

import debounce from "lodash/debounce";

...

watch: {
  variable: debounce(function() {
    console.log('wow');
  }, 500)
}

在 VueJS (Typescript) 中我尝试：

npm i lodash-es
npm i @types/lodash-es -D

在组件中：

import { Component, Vue, Watch } from "vue-property-decorator";
import debounce from "lodash-es/debounce";

...

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

但我收到错误：

'debounce'，缺少 return 类型注释，隐式具有 'any' return 类型。
成员 '500' 隐式具有 'any' 类型。

P.S。这很好用：

func = debounce(() => {
    console.log('wow');
}, 500)

Answer 1

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

语法不正确。应该将装饰器应用于 class 成员，但未指定名称。

没有直接的方法将 Lodash debounce 与 Watch 装饰器一起使用，因为后者应该与原型方法一起使用。

可以将其作为装饰器并将它们链接起来，但这可能会导致不良行为，因为去抖动间隔将通过原型方法在所有组件实例之间共享：

function Debounce(delay: number) {
  return (target: any, prop: string) => {
    return {
        configurable: true,
        enumerable: false,
        value: debounce(target[prop], delay)
    };
  }
}

...
@Watch('variable')
@Debounce(500)
onVariable() { ... }
...

这可能应该通过去抖动实例方法来实现，类似于 the documentation 建议的方式：

...
created() {
  this.onDebouncedVariable = debounce(this.onDebouncedVariable, 1000);
}

@Watch('count')
onVariable() {
    this.onDebouncedVariable();
}

onDebouncedVariable() { ... }
...

Answer 2

你可以使用这个：https://www.npmjs.com/package/vue-debounce-decorator

然后这样做：

  @Watch('value')
  @Debounce(300)
  private onValueChanged (val: string): void {
    // do your thing here
  }

如何在带有 Typescript 的 VueJs watch 中使用 Lodash 去抖动

How to use Lodash debounce in VueJs watch with Typescript

watch

typescript

lodash

vue.js