vue防抖实现原理
Vue防抖实现原理
防抖（Debounce）是一种优化高频触发事件的技术，确保事件在停止触发后一段时间内只执行一次。在Vue中，防抖通常用于输入框搜索、窗口大小调整等场景。
核心原理
防抖函数通过延迟执行目标函数，若在延迟时间内再次触发，则取消之前的延迟并重新计时。只有当触发间隔超过指定时间后，目标函数才会执行。
实现方式
方法一：使用Lodash库
Lodash提供了现成的_.debounce方法，可直接在Vue组件中使用。
import { debounce } from 'lodash';
export default {
methods: {
handleInput: debounce(function() {
// 实际逻辑
}, 500)
}
}方法二：手动实现防抖函数
自定义防抖函数，利用setTimeout和clearTimeout控制执行时机。
function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
export default {
methods: {
handleInput: debounce(function() {
// 实际逻辑
}, 500)
}
}Vue3中的使用
在Vue3的setup中，可以使用ref和watch结合防抖。
import { ref, watch } from 'vue';
import { debounce } from 'lodash';
export default {
setup() {
const searchQuery = ref('');
watch(searchQuery, debounce(() => {
// 实际逻辑
}, 500));
return { searchQuery };
}
}注意事项
- 防抖时间需根据实际场景调整，过长会影响用户体验，过短则失去防抖效果。
- 组件销毁时需清除定时器，避免内存泄漏。
- 对于需要立即执行的场景（如首次触发），可扩展防抖函数支持
leading选项。
