避免在每次输入字母时更新 Vue.js 搜索

Question

我vue.js在我的 webapp 中构建了一个带有2.0的搜索组件。我现在遇到的问题是它搜索每个类型事件。所以假设我想搜索samsung. 它向我的服务器发出 7 个请求（7 个字母）。

我的输入字段如下所示：

<input
        class="input pr-4 pl-10 block"
        type="text"
        placeholder="Search for anything..."
        v-model="search"
        @keydown.enter="isOpen = false"
        @keydown.esc="isOpen = false"
        @input="onChange"/>

我如何确保它只在输入单词时进行搜索（因此它向我的服务器发出 1 个请求）

Answer 1

您通常通过延迟或所谓的构建来解决此类问题 debounce。通过去抖动一个函数，你基本上是说“在这么多毫秒后执行这个函数，除非再次调用去抖动的函数”。如果用户输入速度足够快，这会将一些请求保存到您的服务器。延迟应该足够小，不会被用户注意到，但应该足够大，以防止向您的服务器发送不必要的垃圾邮件。在这个例子中，我使用了 lodash 的 debounce 函数（文档）。

如果您的搜索时间通常太长，去抖动将有助于减少流血，但不会阻止流血。考虑添加一个实际的搜索按钮并在单击该按钮和/或按 Enter 时触发搜索。您还可以创建“建议”的低成本搜索和搜索所有内容的常规搜索，类似于您在搜索框中键入的内容，例如，维基百科。

<template>
  <input
    class="input pr-4 pl-10 block"
    type="text"
    placeholder="Search for anything..."
    v-model="search"
    @keydown.enter="isOpen = false"
    @keydown.esc="isOpen = false"
    @input="debouncedOnChange"
  />
</template>

<script>
import _debounce from 'lodash.debounce';

export default {
  name: 'search',
  data () {
    return {
      search: '',
      isOpen: false
    }
  },

  computed: {
    debouncedOnChange () {
      return _debounce(this.onChange, 700);
    }
  },

  methods: {
    onChange () {
      // do something with this.search
    }
  }
}
</script>