前言
防抖节流是可以说是一种优化组件性能的技巧，可以有效减少组件中的渲染次数和计算量，从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数，调用方式都差不多。
防抖：在一定时间内，多次触发同一事件，只执行最后一次操作，常用于输入框搜索、滚动加载等场景。
节流：在一定时间内，多次触发同一事件，限制函数执行频率，防止函数被频繁调用，从而提高页面性能。
一、基于Vue3内置的lodash函数库实现防抖节流
（1）首先导入lodash函数库的防抖和节流方法
import {
debounce, throttle } from 'lodash'
（2）随便写两个按钮
<el-button size="small" type="primary" @click="handleDebounceClick($event)">
<el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon>
<small>防抖·篮球</small>
</el-button>
<el-button size="small" type="primary" @click="handleThrottleClick($event)">
<el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon>
<small>节流·足球</small>
</el-button>
（3）随便写两个方法
/**
* 防抖·篮球
*/
const handleDebounceClick = debounce((evt) => {
// ---- ^ 业务逻辑 ----
// 定义fn方法
const fn = (evt) => {
console.log('debounce =>', evt)
}
// 调用fn方法
fn(evt)
// ---- / 业务逻辑 ----
}, 1000)
/**
* 节流·足球
*/
const handleThrottleClick = throttle((evt) => {
// ---- ^ 业务逻辑 ----
// 定义fn方法
const fn = (evt) => {
console.log('throttle =>', evt)
}
// 调用fn方法
fn(evt)
// ---- / 业务逻辑 ----
}, 1000)
二、自行设计实现的防抖节流函数
（1）自行设计实现防抖节流的好处
关于Vue的防抖节流函数库或插件已经有很多了，这个可以自己搜一下并看看效果如何。那为何还需要自行设计实现防抖节流？因为有些需求需要定制化设计，同时你还知道了防抖节流的基本原理。
（2）防抖节流具体实现
/**
* 防抖
*/
const debounce = (fn, time) => {
let timer = null
return (...args) => {
const context = this
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.call(context, ...args)
}, time)
}
}
/**
* 节流
*/
const throttle = (fn, time) => {
let activeTime = null
return (...args) => {
const context = this
const current = Date.now()
if (current - activeTime >= time) {
fn.call(context, ...args)
activeTime = Date.now()
}
}
}
（2）随便写两个按钮
<el-button size="small" type="primary" @click="handleDebounceClick($event, '你好')">
<el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon>
<small>防抖·篮球</small>
</el-button>
<el-button size="small" type="primary" @click="handleThrottleClick($event, '世界')">
<el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon>
<small>节流·足球</small>
</el-button>
（3）随便写两个方法
/**
* 防抖·篮球
*/
const handleDebounceClick = debounce((evt, str) => {
// ---- ^ 业务逻辑 ----
// 定义fn方法
const fn = (evt) => {
console.log('debounce =>', evt, str)
}
// 调用fn方法
fn(evt)
// ---- / 业务逻辑 ----
}, 1000)
/**
* 节流·足球
*/
const handleThrottleClick = throttle((evt, str) => {
// ---- ^ 业务逻辑 ----
// 定义fn方法
const fn = (evt) => {
console.log('throttle =>', evt, str)
}
// 调用fn方法
fn(evt)
// ---- / 业务逻辑 ----
}, 1000)
三、运行效果
