vue3自定义防抖节流指令

### 创建 Vue 3 自定义防抖和节流指令 #### 防抖 (Debounce) 指令实现 为了在 Vue 3 中创建一个防抖指令，需要利用 Composition API 和自定义指令的生命周期钩子。下面展示了一个简单的 `v-debounce` 指令实现： ```javascript import { nextTick } from 'vue'; const debounceDirective = { mounted(el, binding) { let timeout; el.addEventListener('input', () => { const callback = binding.value || Function.prototype; clearTimeout(timeout); timeout = setTimeout(() => { callback(); }, binding.arg || 300); // 默认延迟时间为300毫秒 }); }, }; export default debounceDirective; ``` 此代码片段展示了如何监听输入事件，并通过设置定时器来控制回调函数的触发频率[^1]。 #### 节流 (Throttle) 指令实现 对于节流功能，则是在一定时间内只允许一次操作被执行。这里提供了一种基于时间戳的方式去实现 `v-throttle` 指令： ```javascript import { onMounted, onUnmounted } from 'vue'; const throttleDirective = { beforeMount(el, binding) { let lastExecTime = 0; function handleEvent(event) { const now = new Date().getTime(); if ((now - lastExecTime) >= (binding.arg || 500)) { // 设置默认间隔为500ms lastExecTime = now; const handler = binding.value; handler && handler(event); } } el._throttledHandler = handleEvent; // 存储处理器以便稍后移除 ['click'].forEach(eventName => el.addEventListener(eventName, el._throttledHandler)); }, unmounted(el) { ['click'].forEach(eventName => el.removeEventListener(eventName, el._throttledHandler)); } }; export default throttleDirective; ``` 这段代码实现了点击事件上的节流效果，在组件卸载时还会清理掉已添加的事件监听器以防止内存泄漏[^2]。 #### 注册全局指令 最后一步就是将这两个指令注册成为全局可用的形式： ```javascript // main.js 或入口文件中 import { createApp } from 'vue'; import App from './App.vue'; import vDebounce from './directives/v-debounce'; // 假设保存路径如此 import vThrottle from './directives/v-throttle'; createApp(App).directive('debounce', vDebounce).directive('throttle', vThrottle).mount('#app'); ``` 这样就可以在整个应用程序范围内使用 `<template>` 标签内的 `v-debounce` 和 `v-throttle` 属性了[^3]。