vue3防抖节流封装

### Vue3 中实现防抖和节流函数的封装

在 Vue3 应用程序中，可以利用 `lodash` 或者更轻量级的 `throttle-debounce` 库来实现防抖 (debounce) 和节流 (throttle) 功能。为了更好地集成这些功能到组件逻辑内，推荐创建自定义组合式 API 函数。

#### 使用 throttle-debounce 实现 Debounce 和 Throttle 封装

// 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]：

<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>

此示例展示了如何将防抖和节流应用于用户输入场景下，从而减少不必要的计算开销以及提高用户体验。