Vue3 怎么封装一个带防抖搜索的 Composable？

Question

仓乃文 · Accepted Answer

搜索框输入时直接发请求太频繁，每次都写防抖逻辑很重复。封装一个防抖搜索 Composable，输入停止后自动触发搜索，返回加载状态和结果。实现： ```javascript import { ref, watch } from "vue"; export function useDebouncedSearch(searchFn, delay = 300) { const keyword = ref(""); const results = ref([]); const loading = ref(false); let timer = null; watch(keyword, (val) => { clearTimeout(timer); if (!val.trim()) { results.value = []; return; } timer = setTimeout(async () => { loading.value = true; try { results.value = await searchFn(val); } finally { loading.value = false; } }, delay); }); return { keyword, results, loading }; } ``` 使用： ```javascript const { keyword, results, loading } = useDebouncedSearch( (q) => fetch(`/api/search?q=${q}`).then((r) => r.json()), 300 ); ``` 模板： ```html

搜索中...

{{ item.name }}

``` 补充说明： - 也可以用 customRef 实现防抖 ref，但封装为 Composable 更灵活 - 组件卸载时 watch 自动停止，但 setTimeout 需要在 onScopeDispose 中清理 - 可扩展支持取消上一次请求（AbortController）避免竞态 - 可扩展 minLength 参数，输入过短时不搜索