vue中使用节流

红太狼 2021-04-19 14:40 665阅读 0赞

### 前言 ###

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

### 什么是节流？ ###

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

### 搭建项目 ###

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

### 代码展示 ###

export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data () {
        return {
          search: {
            input: '',
            timer:null
          }
        }
      },
      watch: {
        'search.input': {
          handler (value) {
            if (this.timer) {
              clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
              this.getList();
            }, 1000)
    
          },
          deep: true
        }
      },
      methods: {
        getList(){
          //在这里你可以请求你的接口，拿到你想要的数据
          console.log(1)
        }
      }
    }
    </script>

### 页面展示 ###

初始化页面

当我输入15个字母后，如果不做节流那么控制台会打印15个1，也就是会请求15次接口，做了就留以后看一下页面，只打印1个1，大大优化了页面减少了请求次数。

### 总结 ###

在网上看到好多封装了防抖和节流的方法，但只觉得不太好用，lodash里面貌似也提供了专门的方法，我也简单的看了一下，这里我没有写防抖的例子，放抖：反复触发事件N秒，只执行一次，如果再触发，时间重新计算，如果你感兴趣也可以自己去尝试一下，每次记录一点点分享一点点，如果你觉得这个节流很实用，那就给我一个小小的赞吧(^\_^)!