vue3 防抖节流

### Vue3 中防抖和节流的实现及用法 #### 方法一：通过 `lodash` 库引入防抖和节流功能 为了简化开发过程并提高代码可读性和维护性，可以借助第三方库如 Lodash 来快速集成防抖 (debounce) 和节流 (throttle) 功能。安装 lodash 后，在组件内部按需导入对应的工具函数即可。 ```javascript // 安装依赖包 npm install --save lodash.debounce lodash.throttle import { ref, onMounted } from 'vue'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; export default { setup() { const count = ref(0); // 创建一个被延迟执行的方法 const handleScrollDebounced = debounce(() => { console.log('Scrolled with Debounce', ++count.value); }, 500); // 创建一个频率受限的方法 const handleResizeThrottled = throttle(() => { console.log('Resized with Throttle', ++count.value); }, 1000); onMounted(() => { window.addEventListener('scroll', handleScrollDebounced); window.addEventListener('resize', handleResizeThrottled); return () => { window.removeEventListener('scroll', handleScrollDebounced); window.removeEventListener('resize', handleResizeThrottled); }; }); return { count, handleScrollDebounced, handleResizeThrottled } }, }; ``` 这种方法简单易行，适合初学者学习掌握基本概念[^1]。 #### 方法二：利用 Composition API 自定义逻辑组合 对于更复杂的场景或希望避免额外依赖的情况下，可以直接基于 JavaScript 的高阶函数特性来自定义防抖和节流行为： ```typescript function useDebounce(fn, delay) { let timer; function debounced(...args){ clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); } return debounced; } function useThrottle(fn, limit) { let inThrottle; function throttled(...args){ if (!inThrottle) { fn.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } } return throttled; } ``` 上述两个辅助函数可以在任何地方重复使用，并且可以根据具体需求调整参数设置来满足不同的业务逻辑要求[^2]。 #### 方法三：通过自定义指令实现全局应用 考虑到某些情况下可能需要在整个项目范围内统一处理输入事件或其他交互操作，则可以通过创建自定义指令的方式来进行封装: ```javascript app.directive('debounce',{ mounted(el,binding,vnode){ el.handler = _.debounce((...args)=>{ vnode.ctx[binding.expression](...args); },binding.arg||300); el.addEventListener(binding.modifiers.click?'click':'input',el.handler); }, unmounted(el){ el.removeEventListener(binding.modifiers.click?'click':'input',el.handler); } }); <!-- 使用方式 --> <input v-debounce:500="handleInput"/> <button v-debounce.click:800="handleSubmit">Submit</button> ``` 这种方式不仅能够保持模板清晰简洁，还能有效降低耦合度，便于后期维护升级。 ### 总结 以上介绍了三种不同层次上实现防抖和节流的技术方案，开发者可根据实际应用场景灵活选用最适合的一种或多种方式进行实践探索。无论是采用成熟的第三方库还是自行编写实用程序，都应注重性能优化的同时兼顾用户体验提升。