Vue 实现防抖搜索功能：节流函数的应用与代码示例

作者：安全边界

时间：2026-10-22

本文介绍在 Vue 中实现边输入边搜索功能时，如何通过节流函数解决频繁请求导致的页面卡顿问题。通过对比传统提交方式，详细讲解了利用定时器控制请求频率的方法，并提供了完整的 Vue 组件代码示例，帮助开发者优化搜索体验。

文章目录

Vue 搜索功能与性能优化方案

效果图展示如下：

Vue 搜索功能与性能优化方案

搜索功能通常分为两种情况：一种是用户输入完毕后点击确定按钮再向后端发送请求；另一种则是边输入边向后台发送请求。后者虽然体验流畅，但会因频繁发送请求导致页面卡顿等性能问题。为此，本文采用节流函数（throttle）来解决该问题，即当用户每次按键间隔超过 300ms 时才发送请求，否则不触发请求。

对应的 Vue 组件文件为 search.vue。


<template>
 <div id="search">
 <input type="text" class="search" placeholder="搜索" v-model.trim="title" />
 </div>
</template>

Vue 组件代码实现

JavaScript 逻辑实现如下：


<script>
// 节流函数
const delay = (function() {
 let timer = 0;
 return function(callback, ms) {
 clearTimeout(timer);
 timer = setTimeout(callback, ms);
 };
})();
export default {
 name: 'search',
 data() {
 return {
  title: '',
  search:[]
 };
 },
 watch: {
 //watch title change
 title() {
  delay(() => {
  this.fetchData();
  }, 300);
 },
 },
 methods: {
 async fetchData(val) {
  const res = await this.fetch({
  url: '写上你的URL',
  method: 'GET',
  params: { title: this.title },
  });
  this.search = res.data.list;
 },
 },
 mounted() {},
};
</script>

以上就是 Vue 实现边输入边搜索功能的完整示例，希望能对读者有所帮助，也欢迎大家继续支持本站。