在 Vue 3 中，你可以使用防抖函数（debounce）来限制某个函数在一定时间内的执行频率。防抖函数通常用于优化性能，例如在用户输入时限制搜索请求的发送频率。
下面是一个使用 Vue 3 指令封装防抖函数的示例：
创建一个防抖函数：
function debounce(func, delay) { let timeout; return function (...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; }
创建一个自定义指令 v-debounce：
import { Directive } from 'vue'; const debounceDirective: Directive = { beforeMount(el, binding) { const debouncedHandler = debounce(binding.value.handler, binding.value.delay); el.addEventListener(binding.arg, debouncedHandler); }, unmounted(el, binding) { el.removeEventListener(binding.arg, debouncedHandler); }, }; export default debounceDirective;
在 Vue 3 组件中使用 v-debounce 指令：
<template> <input v-debounce:input="handleInput" /> </template> <script> import debounceDirective from './directives/debounce'; export default { directives: { debounce: debounceDirective, }, methods: { handleInput(event) { // 处理输入事件的逻辑 console.log('Debounced input:', event.target.value); }, }, }; </script>
在上面的示例中，我们创建了一个 v-debounce 指令，它将输入事件（input）与 handleInput 方法绑定，并使用防抖函数来限制 handleInput 的执行频率。在 beforeMount 钩子中，我们将防抖函数添加到输入事件监听器中，并在 unmounted 钩子中移除监听器。这样，我们就可以在输入事件触发时使用防抖函数来限制 handleInput 的执行频率了。
