Vue中如何为SearchInput集成debounce且避免父组件重复实现？

你的核心矛盾是：防抖逻辑放组件内会导致输入框数据更新延迟，放父组件又要重复编写。本质原因是之前的组件把输入框绑定值和防抖emit强耦合了，只要拆分状态或者封装复用逻辑就能解决。

方案一：组件内部拆分状态，实时显示+防抖触发 #

让组件内部维护输入框的实时显示值，防抖只作用于搜索事件的触发，同时监听父组件传入的props值做同步，这样既保证输入无延迟，又把防抖逻辑封装在组件内。

修改后的SearchInput组件：

<script setup lang="ts">
import { ref, watch } from 'vue';

interface IProps {
    searchString?: string;
    debounceDelay?: number; // 支持父组件自定义防抖延迟
}

const emit = defineEmits<{
    handleSearch: [value: string];
}>();

const props = withDefaults(defineProps<IProps>(), {
    searchString: '',
    debounceDelay: 1000 // 默认1秒防抖
});

// 内部维护输入框实时值，保证显示无延迟
const internalValue = ref(props.searchString);

// 封装防抖函数
const debounce = (fn: (...args: any[]) => void, delay: number) => {
    let timeoutId: number | null = null;
    return (...args: any[]) => {
        if (timeoutId) clearTimeout(timeoutId);
        timeoutId = window.setTimeout(() => fn(...args), delay);
    };
};

// 创建防抖后的搜索触发函数
const debouncedEmit = debounce((value: string) => {
    emit('handleSearch', value);
}, props.debounceDelay);

// 监听输入值变化，触发防抖搜索
watch(internalValue, (newValue) => {
    debouncedEmit(newValue);
});

// 监听父组件传入的searchString，同步更新内部值（比如路由变化场景）
watch(() => props.searchString, (newValue) => {
    internalValue.value = newValue;
});
</script>

<template>
    <div class="input-wrapper">
        <input v-model="internalValue" class="input" placeholder="Type the name of book or author...">
        <img class="icon" src="@/assets/images/icons/MAGNIFYING_GLASS.svg" alt="search">
    </div>
</template>

父组件ToolBar简化（无需自己写防抖）：

<script setup lang="ts">
import SearchInput from '@/components/UI/SearchInput.vue';

interface IProps {
    searchString?: string
}

const props = withDefaults(defineProps<IProps>(), {
    searchString: ''
});

const route = useRoute();
const router = useRouter();

let searchValue = ref<string>(props.searchString);

const handleSearch = (value: string) => {
    if (value.length < 3) {
        router.push({});
        return;
    }
    router.push({ query: { search: value } });
};

watch(route, () => {
    const routeQuery = route.query.search;
    if (typeof routeQuery === 'string') {
        searchValue.value = routeQuery;
    } else {
        searchValue.value = '';
    }
}, {immediate: true});
</script>

<template>
    <div class="search-input">
        <search-input
            :search-string="searchValue"
            @handle-search="handleSearch"
            <!-- 可选：自定义防抖延迟 -->
            :debounce-delay="800"
        />
    </div>
    <div class="toolbar">
        <div v-show="searchValue" class="toolbar__search">
            Results “<span>{{ searchValue }}</span>”
        </div>
    </div>
</template>

方案二：封装防抖Hook，父组件复用逻辑 #

如果不想让组件内部处理防抖，可以把防抖逻辑封装成独立的Vue Hook，父组件只需引入即可复用。

创建useDebounce.ts：

import { ref, watch } from 'vue';

export function useDebounce<T>(initialValue: T, delay: number = 1000) {
    const debouncedValue = ref(initialValue);
    let timeoutId: number | null = null;

    watch(() => initialValue, (newValue) => {
        if (timeoutId) clearTimeout(timeoutId);
        timeoutId = window.setTimeout(() => {
            debouncedValue.value = newValue;
        }, delay);
    }, { immediate: true });

    return debouncedValue;
}

父组件ToolBar使用Hook：

<script setup lang="ts">
import SearchInput from '@/components/UI/SearchInput.vue';
import { useDebounce } from '@/hooks/useDebounce';

interface IProps {
    searchString?: string
}

const props = withDefaults(defineProps<IProps>(), {
    searchString: ''
});

const route = useRoute();
const router = useRouter();

let searchValue = ref<string>(props.searchString);
// 使用防抖Hook处理搜索值
const debouncedSearchValue = useDebounce(searchValue, 1000);

// 监听防抖后的值执行业务逻辑
watch(debouncedSearchValue, (value) => {
    if (value.length < 3) {
        router.push({});
        return;
    }
    router.push({ query: { search: value } });
});

watch(route, () => {
    const routeQuery = route.query.search;
    if (typeof routeQuery === 'string') {
        searchValue.value = routeQuery;
    } else {
        searchValue.value = '';
    }
}, {immediate: true});
</script>

<template>
    <div class="search-input">
        <search-input
            :search-string="searchValue"
            @handle-search="(value) => searchValue = value"
        />
    </div>
    <div class="toolbar">
        <div v-show="searchValue" class="toolbar__search">
            Results “<span>{{ searchValue }}</span>”
        </div>
    </div>
</template>

方案三：组件提供防抖开关，灵活控制 #

给SearchInput组件添加防抖开关props，默认开启防抖，允许父组件根据需求关闭或自定义延迟，兼顾灵活性和复用性。

修改后的SearchInput组件：

<script setup lang="ts">
import { ref, watch, computed } from 'vue';

interface IProps {
    searchString?: string;
    useDebounce?: boolean;
    debounceDelay?: number;
}

const emit = defineEmits<{
    handleSearch: [value: string];
}>();

const props = withDefaults(defineProps<IProps>(), {
    searchString: '',
    useDebounce: true,
    debounceDelay: 1000
});

const internalValue = ref(props.searchString);

// 防抖函数封装
const debounce = (fn: (...args: any[]) => void, delay: number) => {
    let timeoutId: number | null = null;
    return (...args: any[]) => {
        if (timeoutId) clearTimeout(timeoutId);
        timeoutId = window.setTimeout(() => fn(...args), delay);
    };
};

// 根据防抖开关选择触发方式
const triggerSearch = computed(() => {
    if (!props.useDebounce) {
        return (value: string) => emit('handleSearch', value);
    }
    return debounce((value: string) => emit('handleSearch', value), props.debounceDelay);
});

watch(internalValue, (newValue) => {
    triggerSearch.value(newValue);
});

watch(() => props.searchString, (newValue) => {
    internalValue.value = newValue;
});
</script>

<template>
    <div class="input-wrapper">
        <input v-model="internalValue" class="input" placeholder="Type the name of book or author...">
        <img class="icon" src="@/assets/images/icons/MAGNIFYING_GLASS.svg" alt="search">
    </div>
</template>

核心思路总结 #

不管哪种方案，核心都是把输入框的实时显示和防抖触发的业务逻辑拆分：输入框始终实时响应用户输入，防抖只作用于后续的搜索请求/路由跳转等操作，这样就不会出现数据更新延迟的问题，同时实现防抖逻辑的复用。

内容的提问来源于stack exchange，提问作者Maks