vue2使用lodash中的防抖（debounce）函数

在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作，例如搜索框输入时的实时搜索。下面是一个使用防抖函数的示例：

1. 安装防抖函数库

首先，你需要安装一个防抖函数库，例如lodash库的debounce函数。你可以使用npm或yarn命令来安装它：

npm install lodash

或

yarn add lodash

1. 在Vue组件中引入并使用防抖函数

<template>
  <div>
    <input type="text" v-model="searchText" @input="debouncedSearch" placeholder="Search...">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchText: '',
      searchResults: [],
    };
  },
  methods: {
    // 防抖函数，延迟300毫秒执行搜索操作
    debouncedSearch: debounce(function() {
      // 执行搜索操作，例如发送网络请求或处理数据
      // 可以在这里调用搜索函数
      this.performSearch();
    }, 300),
    performSearch() {
      // 在这里执行实际的搜索操作，例如发送网络请求或处理数据
      // 使用this.searchText来获取输入的搜索文本
      // 然后更新this.searchResults数组来显示搜索结果
    },
  },
};
</script>

在上述示例中，debounce函数延迟了debouncedSearch方法的执行，300毫秒内如果有新的输入，将重新计时，直到没有新的输入后触发performSearch方法进行实际的搜索操作。

通过使用防抖函数，可以节省资源并提高用户体验，避免在频繁触发的事件中重复执行操作。记得在组件销毁前取消防抖函数的注册，避免潜在的内存泄漏问题。