Composition API 中防抖搜索建议通过 watch 监听 ref 输入值，用 setTimeout/clearTimeout 延迟并取消前序请求，适用于实时联想；节流则用时间戳或闭锁标志限制固定频率调用，适合非实时高频场景；二者均应封装为支持 cancel、isLoading、error 和 abortController 的可复用组合式函数。
在 Composition API 中，防抖（debounce）和节流（throttle）搜索建议的核心是：用 ref 或 reactive 管理输入值，用 watch 监听变化，并通过 setTimeout / clearTimeout 实现防抖，或用时间戳/定时器锁控制调用频率实现节流。关键在于把逻辑封装成可复用的组合式函数，不耦合具体组件。
防抖搜索建议：延迟执行、取消前序请求
适用于输入框实时搜索建议（如搜索关键词联想），用户还在打字时，不急着发请求，等他停顿后再查。
- 定义一个 useDebouncedSearch 组合式函数，接收搜索关键词 ref、防抖毫秒数（如 300ms）、以及实际执行搜索的函数（如
fetchSuggestions） - 内部用 ref 存储定时器 ID，每次 watch 触发时先
clearTimeout，再setTimeout新任务 - 注意：搜索函数应返回 Promise，便于组件处理 loading / error；建议将 loading 状态也作为返回值暴露出去
节流搜索建议：固定频率执行，适合高频但无需实时响应的场景
比如滚动触发的“加载更多”或某些非关键路径的建议补全，不需要每次输入都响应，限制为每 500ms 最多查一次。
- 节流可基于时间戳比对（记录上次执行时间）或使用 setTimeout + 闭锁标志
- 推荐用定时器方式：设置一个 isThrottled 标志，watch 触发时若未节流则立即执行并设为 true，同时启动定时器在 delay 后重置标志
- 相比防抖，节流更“激进”——即使用户一直输，也会按固定节奏发请求，适合对延迟不敏感但需控频的场景
封装成通用组合式函数：支持 cancel、loading 和错误处理
一个健壮的 useSearchSuggest 应该不只是做延时，还要考虑真实开发中的痛点：
- 暴露 cancel 方法，允许组件在 onUnmounted 或切换 tab 时主动清空待执行的定时器
- 返回 isLoading 状态（ref），方便绑定 v-loading 或禁用输入框
- 把请求错误通过 try/catch 捕获，暴露 error ref 或触发自定义事件（如 emit('error')）
- 可选支持 abortController（配合 fetch），让未完成的请求真正中止，避免竞态问题
实际使用示例（在 setup 中）
组件内只需三步：声明搜索词、调用组合函数、绑定结果。
const keyword = ref('')const { suggestions, isLoading, error, cancel } = useDebouncedSearch(keyword, 400, fetchApi)<input v-model="keyword" /> <div v-if="isLoading">搜索中...</div>- 别忘了在
onBeforeUnmount调用cancel()避免内存泄漏
