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

【问题标题】：Avoid the Vue.js search to be updated in every letter typing避免在每次输入字母时更新 Vue.js 搜索
【发布时间】：2019-03-11 16:33:49
【问题描述】：

我在我的 web 应用程序中使用 vue.js 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 个请求）

【问题讨论】：

标签： javascript search vue.js

【解决方案1】：

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

如果您的搜索总体上花费的时间过长，去抖动将有助于减少出血，但不会阻止它。考虑添加一个实际的搜索按钮并在单击该按钮和/或按 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>

【讨论】：

谢谢！这正是我一直在寻找的地方:)
为什么返回_debounce()？而不是直接调用它？
在这种情况下我返回它，因为debouncedOnChange 是一个计算属性。如果我不归还它，什么都不会发生。我为我的正常函数计算一个去抖函数，然后丢弃它。它将返回undefined，这对@input 事件没有任何用处。我们在这里使用计算属性，因为我们想计算一次去抖动函数。如果我们要为我们所做的每个输入事件创建一个新的去抖动函数，它将类似于window.setTimeout(this.onChange, 700)，它将为每个输入事件执行一次该函数，而不是分组。