开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

一：概念

Lodash是一个javascript原生库，也是Node JS的常用模块，可以用 npm install -g lodash 命令安装。一个意在提高开发者效率,提高JS原生方法性能的JS库。

很多方法lodash已经写好了，直接调用就行，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。

二：安装

1：浏览器环境
<script src="lodash.js"></script>
2：npm安装

$ npm i -g npm  
$ npm i --save lodash

三：优点

Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

四：防抖和节流

主要是为了降低高频事件触发，减少dom操作或请求次数，提升性能。高频事件包括onscroll、onresize、keyup/keydown、mousemove

防抖：n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时，通俗来讲就是前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发·只会执行一次
节流：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

防抖举栗

this.getList = _.debounce(this.getList(),3000);

节流举栗

this.getList = _.throttle(this.getList()3000);

区别

相同点：

都可以通过使用 setTimeout 实现
目的都是为了降低回调执行频率，节省计算资源

不同点：

防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

五：项目中使用lodash方法

节流

// 按需引入 lodash的节流方法（throttle）
import throttle from 'lodash/throttle' （推荐）
 
methods: {
    // 开启节流 不用使用箭头函数，有this指向的问题
    changeIndex:throttle(function(index){
        this.activeIndex = index
    },100)
},

节流用法

_.throttle(func, [wait=0], [options=])
 
参数
func (Function): 要节流的函数。
[wait=0] (number): 需要节流的毫秒。
[options=] (Object): 选项对象。
[options.leading=true] (boolean): 指定调用在节流开始前。
[options.trailing=true] (boolean): 指定调用在节流结束后。
返回
(Function): 返回节流的函数

举例

// 按需引入lodash的节流方法（throttle）
import debounce from 'lodash/throttle'
// 在wacth中使用
watch: {
  // 属性名:要监视的数据的名称
  searchValue: {
    immediate: true,
    handler:
      // 防抖
      debounce(async function () {
        const { data } = await getSearchSuggestions(this.searchValue)
        this.suggestions = data.data.options
      }, 1000)
  }
},

节流倒计时发送验证码，在一个单位时间内，只能触发一次

methods: {
    input:_.throttle(function(){
        console.log(this.value);
    },1000)
}

防抖搜索框输入防抖，用户输出完整的字符后，才会发出请求

<input type="text" v-model="value" @input="input" />
methods: {
    input:_.debounce(function(){
        console.log(this.value);
    },1000)
}

说说lodash实现防抖和节流