vue debounce

// 使用 Vue 和 lodash 的 debounce 实现防抖功能

<template>
  <div>
    <input v-model="searchQuery" @input="debouncedSearch" placeholder="搜索..." />
    <p>搜索结果: {{ searchResults }}</p>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: ''
    };
  },
  methods: {
    // 模拟搜索函数
    search(query) {
      // 这里可以替换成实际的 API 请求
      this.searchResults = `查询结果为 "${query}"`;
    }
  },
  created() {
    // 使用 lodash 的 debounce 方法创建一个防抖函数
    this.debouncedSearch = _.debounce(this.search, 500);
  }
};
</script>

解释说明：

1. 模板部分：包含一个输入框和一个显示搜索结果的段落。输入框绑定到 searchQuery，并监听 input 事件，触发 debouncedSearch 方法。
2. 脚本部分：
   • 引入了 lodash 库，用于使用其提供的 debounce 方法。
   • data 函数返回两个属性：searchQuery（用户输入的内容）和 searchResults（搜索结果）。
   • methods 中定义了一个 search 方法，模拟搜索逻辑。
   • 在 created 生命周期钩子中，使用 _.debounce 将 search 方法包装成一个防抖函数 debouncedSearch，延迟时间为 500 毫秒。
3. 防抖功能：当用户在输入框中输入内容时，debouncedSearch 不会立即执行，而是等待用户停止输入 500 毫秒后再执行 search 方法，从而避免频繁触发搜索请求。