vue 3 input 防抖

Vue 3中的防抖（debounce）技术是一种常用的功能，用于控制函数的执行频率。它主要应用在输入框（input）场景中，目的是为了提高性能和用户体验。在用户进行输入时，如果立即响应每次键盘事件来处理逻辑，会导致大量的计算和资源消耗，尤其在处理复杂或数据密集型逻辑时更为明显。防抖技术可以确保在用户停止输入一段时间后，才执行相关的处理函数。

在Vue 3中，可以通过组合式 API（Composition API）来实现防抖功能。你可以使用 `ref`, `computed`, `watch` 或 `watchEffect` 等组合式 API 来创建一个防抖函数。以下是一个简单的防抖函数示例：

import { ref, onMounted, onUnmounted } from 'vue';

function useDebounce(fn, delay) {
    let timer;
    const debouncedFn = () => {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
    return debouncedFn;
}

export default {
    setup() {
        const inputText = ref('');
        const debouncedSearch = useDebounce((value) => {
            console.log('输入的内容：', value);
        }, 300); // 防抖延迟设置为300毫秒

        onMounted(() => {
            inputText.value = '';
        });

        onMounted(() => {
            inputText.value = '';
        });

        return {
            inputText,
            debouncedSearch
        };
    }
}

在模板中，你可以这样使用：

<input v-model="inputText" @input="debouncedSearch" />

这样，每当用户输入时，输入框绑定的 `@input` 事件会触发防抖函数 `debouncedSearch`，而不是直接触发 `search` 函数。只有当用户停止输入一段时间（这里是300毫秒）后，`debouncedSearch` 函数才会执行。