源码 

npm install lodash

<template><div><input v-model="query" @input="onInput" placeholder="输入关键字进行搜索" /><ul><li v-for="item in results" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
import _ from 'lodash';export default {data() {return {query: '',results: []};},methods: {onInput() {this.debouncedSearch();},async search() {if (this.query.trim() === '') {this.results = [];return;}try {const response = await fetch(`https://your-api-endpoint/search?query=${this.query}`);const data = await response.json();this.results = data.results;} catch (error) {console.error('Error fetching search results:', error);}}},created() {this.debouncedSearch = _.debounce(this.search, 300);}
};
</script><style scoped>
/* 添加一些样式使组件更美观 */
input {width: 300px;padding: 10px;margin-bottom: 10px;
}ul {list-style-type: none;padding: 0;
}li {background: #f0f0f0;margin: 5px 0;padding: 10px;
}
</style>

代码解释

1. **安装Lodash库**：使用`npm install lodash`命令安装Lodash库，Lodash提供了强大的工具函数，包括`debounce`函数。
2. **模板部分**：包含一个输入框和一个结果列表。当用户在输入框中输入内容时，会触发`onInput`方法。
3. **数据部分**：定义了`query`和`results`两个数据属性，分别存储用户的搜索关键字和搜索结果。
4. **方法部分**：
   - `onInput`方法：每次用户输入时都会调用这个方法，该方法进一步调用`debouncedSearch`方法。
   - `search`方法：这是实际执行搜索请求的方法。它会检查`query`是否为空，如果不为空，则向后端发送请求并更新`results`。
5. **创建钩子**：在组件创建时，使用Lodash的`debounce`函数创建一个防抖函数`debouncedSearch`，它会在用户停止输入后的300毫秒后执行搜索。