vue防抖实现原理
Vue防抖实现原理
防抖（Debounce）是一种优化高频触发事件的技术，确保在事件停止触发后一段时间才执行回调。Vue中可以通过自定义指令或工具函数实现防抖。
防抖的核心逻辑
防抖函数通过定时器延迟执行目标函数。如果在延迟期间再次触发事件，会清除之前的定时器并重新计时。确保连续触发时只有最后一次生效。
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}在Vue中的实现方式
方法1：自定义指令实现
创建全局防抖指令，可在模板中直接使用：
Vue.directive('debounce', {
inserted(el, binding) {
const [fn, delay = 300] = binding.value;
el.addEventListener('click', debounce(fn, delay));
}
});
// 使用方式
<button v-debounce="[handleClick, 500]">提交</button>方法2：方法装饰器
在methods中直接使用防抖包装：
methods: {
handleSearch: debounce(function(keyword) {
// 实际业务逻辑
}, 500)
}方法3：使用lodash库
直接引入成熟的工具库实现：
import { debounce } from 'lodash';
export default {
methods: {
search: debounce(function() {
// API调用
}, 300)
}
}实现注意事项
- 上下文绑定：使用
fn.apply(this, args)确保方法内的this指向正确 - 参数传递：通过剩余参数
...args保留原始事件参数 - 定时器清理：每次触发时先清除旧定时器避免内存泄漏
- 延迟时间：默认值通常设为300ms，可根据交互需求调整
与节流（Throttle）的区别
防抖在连续触发时只执行最后一次，适合搜索框输入场景。节流是固定时间间隔执行，适合滚动事件处理。两者都是闭包与定时器的组合应用，但触发策略不同。
