侧边栏壁纸
博主头像
M酷博主等级

祝君一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 40 篇文章
  • 累计创建 36 个标签
  • 累计收到 240 条评论

目 录CONTENT

文章目录
Vue

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

M酷
2021-09-09 / 0 评论 / 5 点赞 / 833 阅读 / 779 字 / 正在检测是否收录...

背景

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

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

debounce_ipt

由于 debouncethrottle 都是高阶函数,用户传入自定义的函数,执行后会返回一个新的函数,所以需要格外注意 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)的使用方法同理,特殊情况需要根据自己项目情况而定。

5
广告 广告

评论区