vue搜索框防抖节流

在Vue中实现搜索框的防抖节流是很常见的需求。防抖和节流是为了减少频繁触发搜索请求而采取的两种策略。

防抖是指在一定时间内，只触发最后一次操作，常用于用户输入完成后再进行搜索。节流是指在一定时间间隔内，定时触发操作，常用于用户连续输入时适当延迟触发操作。

以下是在Vue中实现搜索框防抖节流的示例代码：

<template>
  <div>
    <input type="text" v-model="searchText" @input="handleInput" placeholder="请输入搜索内容">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchResults: []
    }
  },
  methods: {
    handleInput() {
      // 使用防抖函数
      this.debouncedSearch()
    },
    debouncedSearch: _.debounce(function() {
      // 在这里进行搜索请求
      // 可以调用接口或者执行其他操作
      // 更新搜索结果
      this.searchResults = // 请求返回的结果
    }, 300), // 设置防抖时间间隔为300ms
    throttledSearch: _.throttle(function() {
      // 在这里进行搜索请求
      // 可以调用接口或者执行其他操作
      // 更新搜索结果
      this.searchResults = // 请求返回的结果
    }, 300) // 设置节流时间间隔为300ms
  }
}
</script>

上述代码使用了lodash库中的`debounce`和`throttle`函数来实现防抖和节流效果。需要安装lodash库并引入它才能使用这两个函数。

在`handleInput`方法中，调用了`debouncedSearch`函数来实现防抖效果。当用户输入时，会延迟300ms后执行搜索请求，只会触发最后一次输入的搜索请求。

如果你希望使用节流效果，可以将`handleInput`方法中的调用改为`throttledSearch`函数，它会在一定时间间隔内定时触发搜索请求。

当然，你也可以根据具体需求自行调整防抖和节流的时间间隔，以及搜索请求的具体实现方式。