vue中使用节流

最新推荐文章于 2025-06-30 20:00:00 发布

weixin_33814685

最新推荐文章于 2025-06-30 20:00:00 发布

阅读量1.5w

点赞数 7

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c9b2942e51d45774f114404

本文介绍了在Vue项目中如何使用节流技术优化频繁请求接口的问题。通过一个简单的例子展示了在输入框监听数据变化时，应用节流避免过多的接口调用，从而提升页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近刚跳槽了，来到一家新的公司，第一天进来就开始撸代码了，一直比较忙也没有时间更新文章，今天周六本该休息，为什么又来到公司了呢？昨晚下班的时候遇到一个很恶心的bug，由于昨晚走的早没有解决，今天的我是休息不好的，所以今天就来公司解决了这个该死的虫子。最近看到现在写的项目，类似于自己的一个后台管理系统，很多列表页面，列表页面有很多搜索，他们写的代码就是监听数据变化就请求接口，这样请求接口就太频繁了，感觉防抖和节流如果用上是对于项目非常有用的。不说了，撸代码。

什么是节流？

简单粗暴的讲更容易理解，就是在我不断地触发事件的时候别老是发请求，发一次就够了。（高频事件触发，一定时间内只要执行一次，节流可以减少不断执行频率。）

搭建项目

先用脚手架搭建一个vue的项目，这个傻瓜式搭建我就不说了，看着文档一步一步搭建就好了，我这里搭建的是3.0的脚手架，用了ElementUI库。看一下目录结构

代码展示

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      search: {
        input: '',
        timer:null
      }
    }
  },
  watc