如何使用 Vue.js 去抖过滤器？

Question

我正在尝试按照Vue.js 文档使用debounce过滤器，这样我可以防止在用户输入输入时触发 Ajax 函数。 过去，我使用setTimeout手动阻止在输入每个字母后发送请求并使用重置延迟，但我想用 Vue.js 的方式来做。

这是我尝试过的：

<input
v-model="myInput"
v-on="keyup: someAjaxFunction | debounce 500"
>

文档中没有专门针对此过滤器提供示例。 我什至把过滤器放在正确的地方吗？

去抖

此过滤器仅适用于 v-on

此过滤器采用一个可选参数

包装处理程序以在 X 毫秒内对其进行去抖动处理，其中 X 是参数。 默认为 300 毫秒。 一个去抖处理程序将被延迟，直到调用时刻后至少经过 X 毫秒； 如果在延迟周期之前再次调用处理程序，则延迟周期将重置为 X 毫秒。

我也试过这个：（因为文档提到“包装处理程序......”）

<input
v-model="myInput"
v-on="keyup: debounce( someAjaxFunction, 500 )"
>

我真的可以举个例子。

Answer 1

去抖过滤器已被移除。

使用lodash 的 debounce （或者可能是油门）来直接限制调用昂贵的方法。 你可以达到这样的预期结果：

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
} 

从文档。

Answer 2

你的第一个例子是正确的：

<input v-model="myInput" v-on="keyup: someAjaxFunction | debounce 500">

使用 Vue.js 1.0.0-beta.x，新语法是：

<input v-model="myInput" on-keyup="someAjaxFunction | debounce 500">

Answer 3

另一种方法是去抖v-model ，而不是调用方法。

您也可以只创建自己的 debounce 函数，而无需任何依赖项：

可重复使用的去抖功能

export function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

在你的 Vue 组件中

data: () => ({
  textModel: 'something'
}),
watch {
  textModel: debounce(function(newVal) {
    this.searchTextDebounced = newVal;
  }, 500),
}

Answer 4

使用Quasar（基于Vue.JS）的可以使用Quasar自己的debounce实现（可能Quasar暴露了Lodash的debounce，我不知道）。

在 Q 文档中打开 debouce 部分