vue3的防抖和节流你知道多少在 Vue 3 中，你可以使用防抖（debounce）和节流（throttle）功能来限制

在 Vue 3 中，你可以使用防抖（debounce）和节流（throttle）功能来限制某些方法的执行频率，特别是在处理如输入、滚动、窗口大小调整等高频事件时非常有用。Vue 3 本身并没有内置这些方法，但你可以使用第三方库（如 lodash）或者自己实现这些功能。

1. 加载库

npm install lodash

2. 在页面引用

import { debounce, throttle } from 'lodash'

3. 代码样例

<el-button @click="debounceFunc(2)" type="primary" >防抖</el-button>

<el-button @click="throttleFunc(2)" type="primary" >节流</el-button>

const debounceFunc = debounce(function (val) {
	console.log('防抖触发',count.value+=val)
}, 300) // 设置 300 毫秒的防抖时间

const throttleFunc = throttle(function (val) {
	console.log('节流触发',count.value+=val)
	// 在这里执行一些高频触发的操作，比如发送请求
}, 1000) // 设置 1000 毫秒的节流时间