vue中element中的input框和laod中防抖和节流结合使用（性能优化）使用lodash相关方法

Posted 2022-09-19 勇敢*牛牛

vue中element中的input框配合laod中防抖和节流结合使用（性能优化）

Lodash 中文文档地址：
https://www.lodashjs.com/

<el-input placeholder="请输入内容" v-model="input" clearable class="inp" @input="disshow(input)">
</el-input>
输入文字的时候收集输入信息。但是不需要时时刻刻的收集，就需要考虑到节流。

下载lodash使用节流方法throttle

npm i --save lodash

导入
import _ from "lodash"
使用这个方法
_.throttle(func, [wait=0])

disshow:_.throttle(function(value)
    console.log(value);
    console.log(this.input);
,3000),

这样的话就实现了节流的效果。

那么，如何设置防抖呢？

有方法：_.debounce(func, [wait=0])
<el-button type="warning" @click="bn1">请求网络</el-button>

bn1:_.debounce(function()
    console.log("我被点击了");
    //fetch
,3000),