vue3 函数添加防抖

### 实现防抖功能 为了在 Vue 3 中为函数添加防抖功能，可以利用 `lodash` 库中的 `debounce` 方法或自行编写简单的防抖逻辑。下面展示两种方法： #### 使用 lodash debounce 安装 `lodash.debounce` 或整个 `lodash` 包之后，在组件内部引入并使用 `debounce` 来包裹目标函数。 ```javascript // 安装命令 npm install lodash.debounce 或者 npm install lodash <script setup lang="ts"> import { ref } from 'vue'; import debounce from 'lodash/debounce'; const searchQuery = ref(''); // 创建一个带有延迟执行的搜索处理程序 const handleSearchDebounced = debounce((query) => { console.log(`Searching for: ${query}`); }, 300); function onInputChange(event: Event) { const query = (event.target as HTMLInputElement).value; searchQuery.value = query; handleSearchDebounced(query); } </script> ``` #### 自定义防抖函数 如果不希望依赖第三方库，则可以在项目中创建自己的防抖工具函数，并将其应用于任何需要的地方。 ```typescript <script setup lang="ts"> import { ref } from 'vue'; const searchQuery = ref(''); let timeoutId: NodeJS.Timeout | null = null; function debounce(fn: Function, delay: number): (...args: any[]) => void { return function(...args: any[]): void { if(timeoutId !== null){ clearTimeout(timeoutId); } timeoutId = setTimeout(() => fn.apply(this, args), delay); }; } // 将输入框变化事件绑定到经过防抖后的处理器上 function onInputChange(event: Event) { const query = (event.target as HTMLInputElement).value; searchQuery.value = query; // 调用自定义的防抖器 const debouncedHandler = debounce((q:string) => { console.log(`Custom Debounce Searching for: ${q}`); }, 300)(query); } </script> ``` 这两种方式都可以有效地减少频繁触发的操作频率，从而优化性能和用户体验[^1]。