vue中使用节流

前言

最近刚跳槽了，来到一家新的公司，第一天进来就开始撸代码了，一直比较忙也没有时间更新文章，今天周六本该休息，为何又来到公司了呢？昨晚下班的时候遇到一个很恶心的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秒，只执行一次，若是再触发，时间从新计算，若是你感兴趣也能够本身去尝试一下，每次记录一点点分享一点点，若是你以为这个节流很实用，那就给我一个小小的赞吧(^_^)!