Vue中Lodash的正确用法之debounce和throttle

背景

在某些交互场景下，我们需要控制高频事件的触发频率以减少性能开销，这时我们通常会使用到防抖和节流这2种技术，通常的做法是直接引入工具库 Lodash ，也可以自己实现。

本文主要展示在 Vue 中如何正确使用 Lodash，以下面为搜索框添加 防抖(debounce) 为例：

debounce_ipt

由于 debounce 和 throttle 都是高阶函数，用户传入自定义的函数，执行后会返回一个新的函数，所以需要格外注意 this 的指向问题，对应 Vue 项目中的相关代码如下：

1、引入 debounce 方法

import { debounce } from "lodash";

2、模板部分

<el-input
  v-model="searchVal"
  :placeholder="请输入关键字搜索"
  @input="searchMethod"
>
  <i slot="suffix" class="el-icon-search" />
</el-input>

3、方法部分

// 一定是这种使用方式才有效，不要使用箭头函数，不然内部获取不到 this
searchMethod: debounce(function (query) {
    if (query !== "") {
        this.searchList = this.columnItemList.filter((cur) => cur.name.includes(query));
    } else {
        this.searchList = JSON.parse(JSON.stringify(this.columnItemList));
    }
}, 200)

节流（throttle）的使用方法同理，特殊情况需要根据自己项目情况而定。