Vue侦听器应仅转发变化信号，复杂逻辑须用自定义Hook封装，统一由effectScope管理生命周期，多变量依赖应先聚合为计算属性再监听，网络请求等职责应下沉至service层。
Vue 侦听器本身适合响应数据变化并触发副作用，但直接在 watch 回调里塞入大量业务逻辑，会导致可读性差、测试困难、清理麻烦。真正解耦复杂逻辑的关键，不是“怎么写 watch”，而是“让 watch 只做一件事：转发变化信号”。
用自定义 Hook 封装完整业务流
把数据监听、异步请求、状态管理、错误重试、加载控制等全部收进一个函数里，组件只负责传参和展示。
- Hook 内部调用
watch，但不暴露给组件；组件只调用useSearch({ keyword, debounce: 300 })这类语义化 API - Hook 自动处理防抖、取消上一次请求（用
AbortController）、loading 状态同步、错误 fallback - 所有副作用（
watch、setTimeout、addEventListener）都统一由effectScope管理，组件卸载时自动清理
用 effectScope 划清副作用生命周期边界
避免手动维护 onBeforeUnmount 或反复写 stop()，把整个业务模块的响应式行为打包进一个作用域。
- 模块初始化时创建：
const searchScope = effectScope() - 所有逻辑写在
searchScope.run(() => { watch(...); fetch(...); onScopeDispose(cleanup) })中 - 组件销毁或功能关闭时，只需调一次
searchScope.stop()，所有监听、定时器、连接、自定义清理函数全被释放
把多变量依赖转为计算属性再监听
watch 不支持直接监听多个 ref，硬拼数组或对象容易出错。更清晰的做法是先聚合，再监听。
立即学习“前端免费学习笔记（深入）”；
- 比如要响应
form.name、form.age、form.city任一变化，就定义一个计算属性：const formHash = computed(() => `${form.name}-${form.age}-${form.city}`) - 然后
watch(formHash, ...)—— 逻辑单一、触发精准、无需deep: true - 如果需要区分具体哪个字段变，可在计算属性中返回结构化对象，再用
watch的immediate和旧值对比
网络请求类逻辑交给专门的 service + 状态管理层
侦听器不该承担请求构造、缓存判断、响应解析等职责。这些应下沉到 service 层，watch 只负责“触发”和“接收结果”。
- 例如：
watch(searchTerm, () => searchService.fetch({ q: searchTerm.value })) - service 内部封装了 axios 实例、拦截器、本地缓存策略、错误分类处理
- 组件通过 pinia store 或 ref 暴露的
result、loading、error等状态来响应，watch 不参与 UI 更新逻辑
