vue如何实现防抖
防抖的实现原理
防抖（Debounce）是一种限制函数执行频率的技术，确保函数在连续触发时只执行一次。通常在输入框搜索、窗口resize等场景使用。核心原理是：延迟执行函数，若在延迟期间再次触发，则重新计时。
Vue 2 的实现方法
方法1：使用 Lodash 的 _.debounce
安装 Lodash 并导入 debounce 方法：
npm install lodash在 Vue 组件中使用：
import { debounce } from 'lodash';
export default {
methods: {
handleInput: debounce(function(value) {
console.log('防抖处理:', value);
}, 500)
}
}模板中绑定事件：
<input @input="handleInput($event.target.value)" />方法2：手动实现防抖函数
自定义防抖工具函数：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}在 Vue 组件中应用：
export default {
methods: {
handleInput: debounce(function(value) {
console.log('手动防抖:', value);
}, 500)
}
}Vue 3 的实现方法
方法1：Composition API + Lodash
通过 setup 使用防抖：
import { debounce } from 'lodash';
export default {
setup() {
const handleInput = debounce((value) => {
console.log('防抖处理:', value);
}, 500);
return { handleInput };
}
}方法2：使用 ref 和自定义防抖
结合 Vue 3 的响应式特性：
import { ref } from 'vue';
export default {
setup() {
const inputValue = ref('');
let timer = null;
const debounceInput = (value) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
console.log('防抖值:', value);
}, 500);
};
return { inputValue, debounceInput };
}
}模板绑定：
<input v-model="inputValue" @input="debounceInput(inputValue)" />注意事项
- 延迟时间选择：根据场景调整延迟时间（如搜索建议常用 300-500ms）。
- 内存泄漏：组件销毁时清除定时器（Vue 2 可在
beforeDestroy中清理，Vue 3 使用onUnmounted）。 - 原生事件：若绑定原生 DOM 事件，需通过
$event传递参数。
实际应用示例
搜索框防抖场景：
// Vue 3 Composition API 示例
import { ref } from 'vue';
export default {
setup() {
const searchQuery = ref('');
const searchResults = ref([]);
const fetchResults = debounce(async () => {
const response = await api.search(searchQuery.value);
searchResults.value = response.data;
}, 500);
return { searchQuery, searchResults, fetchResults };
}
}模板：
<input v-model="searchQuery" @input="fetchResults" />
<ul>
<li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
</ul>
