Question

如何在 VueJs 中使用 Lodash 防抖功能和 Typescript 监控

2019-09-04

9284

typescript vue.js lodash watch

在 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' 缺少返回类型注释，隐式具有 'any' 返回类型。
成员 '500' 隐式具有 'any' 类型。

附注：这很好用：

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

Answer 1

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

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

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

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

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

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

这可能应该通过 debounce 实例方法来实现，类似于文档建议的方式：

...
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
  }