vue的防抖实现
Vue 防抖实现方法
在Vue中实现防抖（debounce）可以通过以下几种方式完成：
使用Lodash库的debounce方法
安装Lodash：
npm install lodash在组件中使用：
import { debounce } from 'lodash';
export default {
methods: {
handleInput: debounce(function() {
// 处理逻辑
}, 500)
}
}原生JavaScript实现
export default {
data() {
return {
timeout: null
}
},
methods: {
debounce(func, wait) {
clearTimeout(this.timeout);
this.timeout = setTimeout(func, wait);
},
handleInput() {
this.debounce(() => {
// 处理逻辑
}, 500);
}
}
}使用Vue自定义指令
Vue.directive('debounce', {
inserted: function(el, binding) {
let timeout;
el.addEventListener('input', () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
binding.value();
}, binding.arg || 500);
});
}
});使用方式：
<input v-debounce:300="search" />使用Vue 3的Composition API
import { ref } from 'vue';
export function useDebounce(fn, delay) {
const timeout = ref(null);
return function(...args) {
clearTimeout(timeout.value);
timeout.value = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}在组件中使用：
import { useDebounce } from './useDebounce';
export default {
setup() {
const search = useDebounce(() => {
// 处理逻辑
}, 500);
return { search };
}
}注意事项
- 防抖时间应根据实际需求调整，通常200-500ms比较合适
- 在组件销毁时应该清除定时器，避免内存泄漏
- 对于Vue 3的Composition API，可以使用onUnmounted生命周期钩子清除定时器
防抖与节流的区别
防抖（debounce）和节流（throttle）都是限制函数执行频率的方法：
- 防抖：在事件触发后等待一段时间执行，如果在这段时间内再次触发则重新计时
- 节流：在一定时间间隔内只执行一次，无视这段时间内的多次触发
