核心是通过缓存参数、pending标志+nextTick或防抖实现批量合并请求：监听多个ref时暂存最新值，待稳定后统一发起请求，并用cleanup取消未完成任务。
用 watchEffect 监听多个 ref 并触发合并请求，核心在于：**避免每次变更都发请求，而是收集变化、防抖/节流、批量提交**。Vue 的 watchEffect 本身不提供防抖或合并能力，需手动封装逻辑。
监听多个 ref 并缓存待发送参数
不能让每次响应式变量更新都立刻发起请求，应先暂存最新值，等“稳定”后再统一处理：
- 定义多个 ref（如
searchTerm、filterType、page） - 在
watchEffect内部不直接调用 API，而是更新一个「待发送的参数对象」 - 使用
ref或reactive存储合并后的请求参数，确保响应式更新可被追踪
用 nextTick + 标志位实现简易“稳定等待”
Vue 更新是异步的，同一事件循环中多次 ref 变更会触发一次 watchEffect。但跨操作（比如用户连输+切筛选）需要更可靠的聚合时机：
- 声明一个
pending标志（ref(false)），进入 watchEffect 时若为 true 则跳过 - 首次触发时设为 true，并用
nextTick延迟到 DOM 更新后执行请求 -
nextTick回调里重置pending，保证只发一次
这样即使 searchTerm 和 filterType 在短时间内先后修改，也只会合并成一次请求。
结合防抖实现更可控的合并策略
对用户输入类场景（如搜索框），推荐用防抖替代 nextTick，体验更自然：
- 引入
lodash.debounce或手写轻量防抖函数 - 在
watchEffect中调用防抖函数，传入「构造参数 + 发起请求」的逻辑 - 注意：防抖函数需在 setup 顶层定义，避免每次 watchEffect 触发都新建一个实例
- 示例：
const fetchDebounced = debounce(() => api.search({ q, type, page }), 300)
请求成功后同步本地状态与服务端结果
合并请求不只是发出去，还要确保 UI 与数据一致：
- 请求返回后，用响应数据更新相关 ref（如
resultList.value = res.data） - 若请求失败，可保留上一次有效值，或显示错误提示并恢复输入框原始内容
- 避免在请求中直接修改被监听的 ref（比如边输入边改
searchTerm），否则可能引发无限循环
不复杂但容易忽略：watchEffect 的清理函数（cleanup）可用于取消未完成的防抖任务或 pending 请求，提升健壮性。
