###
Vue3 中实现
防抖和
节流函数的
封装
在
Vue3 应用程序中，可以利用 `lodash` 或者更轻量级的 `throttle-debounce` 库来实现
防抖 (debounce) 和
节流 (throttle) 功能。为了更好地集成这些功能到组件逻辑内，推荐创建自定义组合式 API 函数。
####
使用 throttle-debounce 实现 Debounce 和 Throttle
封装
```
javascript
// useDebouncedRef
.js
import { ref, watch } from '
vue';
import { debounce as db, throttle as th } from 'throttle-debounce';
export function useDebouncedRef(initialValue, delay) {
const value = ref(initialValue);
const debouncedValue = ref(initialValue);
const updateHandler = () => {
debouncedValue
.value = value
.value;
};
// 创建一个取消函数以便清理副作用
let cancel;
if (!cancel) {
cancel = db(delay, updateHandler);
}
watch(value, () => {
cancel();
});
return {
value,
debouncedValue,
};
}
export function useThrottledRef(initialValue, limit) {
const value = ref(initialValue);
const throttledValue = ref(initialValue);
const updateHandler = () => {
throttledValue
.value = value
.value;
};
// 创建一个取消函数以便清理副作用
let cancel;
if (!cancel) {
cancel = th(limit, updateHandler);
}
watch(value, () => {
cancel();
});
return {
value,
throttledValue,
};
}
```
通过上述代码片段，在任何
Vue 组件
里都可以轻松引入并应用这两个钩子函数[^1]：
```html
<template>
<div>
<!-- 输入框 -->
<input v-model="searchQuery
.value" placeholder="Search
..." />
<!-- 显示未处理过的输入值 -->
<p>Raw Input Value: {{ searchQuery
.value }}</p>
<!-- 显示经过
防抖后的最终结果 -->
<p>Debounced Result After Delay: {{ debouncedResult
.debouncedValue }}</p>
<!-- 显示经过
节流后的最新一次更新的结果 -->
<p>Throttled Last Updated Value Within Interval: {{ throttledResult
.throttledValue }}</p>
</div>
</template>
<script setup>
import { onMounted, reactive } from '
vue';
import { useDebouncedRef, useThrottledRef } from '
./useDebouncedRef';
const searchQuery = reactive({ value: '' });
const debouncedResult = useDebouncedRef('', 500); // 设置延迟时间为500毫秒
const throttledResult = useThrottledRef('', 1000); // 设置时间间隔为1秒钟
onMounted(() => {
// 当页面加载完成时初始化监听器
});
</script>
```
此示例展示了如何将
防抖和
节流应用于用户输入场景下，从而减少不必要的计算开销以及提高用户体验。
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
