完整代码演示防抖节流用vue3框架

### Vue3 实现防抖和节流的完整代码示例 以下是基于 Vue3 的 Composition API 和 Options API 来实现防抖（Debounce）和节流（Throttle）功能的完整代码示例。 --- ### 使用 Composition API 实现防抖和节流 #### 防抖（Debounce） ```javascript <template> <div> <input type="text" @input="handleInput" placeholder="请输入..." /> <p>当前输入值：{{ inputValue }}</p> </div> </template> <script setup> import { ref } from 'vue'; // 防抖函数 function debounce(func, delay) { let timer; return (...args) => { if (timer) clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; } const inputValue = ref(''); // 处理输入事件并应用防抖 const handleInput = debounce((event) => { inputValue.value = event.target.value; }, 300); // 设置防抖时间为 300ms </script> ``` 此代码片段展示了如何在 Vue3 中利用 `ref` 创建响应式数据，并通过自定义的 `debounce` 函数处理输入框的变化[^1]。 --- #### 节流（Throttle） ```javascript <template> <div> <button @click="handleClick">点击我</button> <p>{{ clickCount }} 次点击被记录。</p> </div> </template> <script setup> import { ref } from 'vue'; // 节流函数 function throttle(func, limit) { let inThrottle; return () => { if (!inThrottle) { inThrottle = true; func(); setTimeout(() => (inThrottle = false), limit); } }; } const clickCount = ref(0); // 处理按钮点击事件并应用节流 const handleClick = throttle(() => { clickCount.value++; }, 1000); // 设置节流时间为 1 秒 </script> ``` 该部分代码说明了如何使用 `throttle` 函数限制按钮点击事件的触发频率，确保每次点击至少相隔 1 秒才会更新计数器[^2]。 --- ### 使用 Options API 实现防抖和节流 #### 防抖（Debounce） ```javascript <template> <div> <input type="text" @input="debouncedHandleInput" placeholder="请输入..." /> <p>当前输入值：{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { debouncedHandleInput: (() => { let timer; return function (event) { const self = this; if (timer) clearTimeout(timer); timer = setTimeout(() => { self.inputValue = event.target.value; }, 300); // 设置防抖时间为 300ms }; })(), }, }; </script> ``` 这里展示了如何在 Vue3 的 Options API 下创建一个立即执行的匿名函数来封装防抖逻辑，并将其绑定到组件的方法中[^3]。 --- #### 节流（Throttle） ```javascript <template> <div> <button @click="throttledHandleClick">点击我</button> <p>{{ clickCount }} 次点击被记录。</p> </div> </template> <script> export default { data() { return { clickCount: 0, }; }, methods: { throttledHandleClick: (() => { let canRun = true; return function () { if (!canRun) return; canRun = false; this.clickCount++; setTimeout(() => (canRun = true), 1000); // 设置节流时间为 1 秒 }; })(), }, }; </script> ``` 这部分代码解释了如何通过闭包维护状态变量 `canRun`，从而实现对频繁点击行为的有效控制[^4]。 --- ### 总结 以上分别提供了基于 Vue3 的 Composition API 和 Options API 对防抖与节流的支持方式。无论是哪种 API 形式，核心思路均围绕着定时器管理以及状态同步展开。这些技术能够显著提升用户体验，尤其是在交互密集型场景下具有重要作用[^5]。 ---