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

【问题标题】：How do I use Vue.js debounce filter?如何使用 Vue.js 去抖过滤器？
【发布时间】：2015-12-03 04:01:18
【问题描述】：

我正在尝试按照Vue.js docs 使用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 )"
>

我真的可以举个例子。

【问题讨论】：

请注意，这个问题适用于 Vue.js v1；去抖过滤器在 v2 (details) 中被移除

标签： javascript vue.js

【解决方案1】：

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

<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">

【讨论】：

在我的第一个示例中，无论我键入多快/多慢，我肯定会在每个按键上触发 ajax 功能。还有什么我可能会错过的吗？
我一定有其他问题；我已经在 jsFiddle 中进行了测试，并且我的第一个示例中的语法有效。 jsfiddle.net/tpgcsdq9/1

【解决方案2】：

去抖过滤器已经removed。

使用lodash’s debounce（或可能是油门）直接限制调用昂贵的方法。您可以像这样实现预期的结果：

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

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

来自documentation。

【讨论】：

如果我们可以避免更多的 3rd 方依赖，这似乎是明智的。为什么不使用Vue.options.filters.debounce 或像这个例子一样手动去抖动？ stackoverflow.com/questions/37587800/…
正如答案中所指出的，现在已删除去抖动支持。如果您不喜欢 3rd 方库，您可以随时自行编写。

【解决方案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),
}

【讨论】：

【解决方案4】：

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

打开debouce section in Q docs

【讨论】：