watchEffect 依赖收集完全自动且不可手动过滤，需通过代码结构控制：用条件语句限制访问、拆分多个 watchEffect、await 前读取响应式数据、用 computed 封装动态逻辑以明确依赖。
watchEffect 本身不提供“手动划定依赖范围”的开关，它的设计原则就是自动、全量收集同步执行中访问过的响应式属性。所谓“精确控制”，其实是通过调整副作用函数的写法、执行时机和结构来引导它收集你真正想要的依赖，而不是靠配置参数去过滤。
让依赖只在需要时被访问
watchEffect 只追踪实际执行到的代码路径中访问的响应式数据。如果某些值在特定条件下才读取，它们就不会成为依赖。
- 用 if 或 early return 控制访问：比如
if (searchQuery.value) { fetch(...) }，那么只有 searchQuery 会被追踪，page 不会——除非它也在 if 块内被读取 - 避免无意义访问：像
someRef.value; // 单独一行，没用这种写法会意外引入依赖，应删除
拆分逻辑，用多个 watchEffect 各司其职
一个大而全的 watchEffect 容易混入冗余依赖。不如按关注点切分：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 一个负责更新 UI（如 document.title），只读 count.value 和 name
- 另一个负责请求数据，只读 userId.value 和 filter.value
- 彼此隔离，互不影响，依赖清晰可查
异步场景下提前“激活”关键依赖
await 之后的响应式访问不会被追踪。若需监听 page.value 的变化并触发请求，必须在 await 前访问它：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
await api(); data.value = ...; page.value; // 太晚，不追踪 - 正确写法：
const p = page.value; await api(); data.value = ...; // p 在 await 前读取，page 成为依赖 - 或更明确：
page.value; // 纯读取，只为触发依赖收集放在 await 上方
用 computed 包一层，把动态逻辑转为静态依赖
当依赖关系由复杂条件决定时，可先用 computed 提前算出“是否该触发”或“该用哪个值”，再让 watchEffect 读这个计算结果：
- 例如：
const shouldFetch = computed(() => searchQuery.value && isValidFilter(filter.value)) - watchEffect 中只读
shouldFetch.value和searchQuery.value，逻辑收敛，依赖可控
