Vue 响应式侦听如何利用 watchEffect 简化传统 watch 需要显式声明依赖的繁琐

watchEffect 能自动收集依赖，无需手动指定监听项，执行回调时自动追踪所有读取的响应式数据，后续任一变化即重新执行；支持清理函数和多种执行时机，但不提供新旧值对比且默认立即执行。

watchEffect 能自动收集依赖，不用手动写 watch 里那些字符串或函数形式的依赖项，代码更简洁、更少出错。

自动追踪响应式数据变化

传统 watch 需要明确指定监听谁，比如 watch(() => count.value, ...) 或 watch('count', ...)，稍不注意就漏掉深层属性或计算逻辑。而 watchEffect 会执行一次回调，在执行过程中“路过”的所有响应式数据（ref、reactive、computed）都会被自动记录为依赖。

1. 只要在回调里读取了 user.name、list.length、isReady，它们就自动成为监听目标
2. 后续任意一个变化，回调都会重新运行
3. 无需关心是 ref 还是 reactive，也不用展开对象或写 getter 函数

适合副作用逻辑集中、依赖动态的场景

当一段副作用（比如发请求、更新 DOM、同步本地存储）依赖多个分散的响应式状态，且这些依赖可能随条件变化时，watchEffect 更自然。

1. 例如：搜索框 + 筛选条件 + 分页页码同时影响请求参数，直接在 watchEffect 里拼 api.search({ q, type, page }) 就行
2. 如果某个条件未启用（比如 type 是 null），它没被读取，就不会加入依赖 —— 自动按需响应
3. 避免手动维护一长串依赖数组，也避免因条件分支导致依赖遗漏

注意清理和执行时机控制

watchEffect 默认在组件更新前执行（flush: 'pre'），适合需要同步更新 DOM 的逻辑；也可设为 'post' 或 'sync'。它还提供清理函数，用于中断异步操作：

1. 回调接收一个 onInvalidate 参数，调用它可注册清理逻辑（如取消上一次请求）
2. 每次新副作用运行前，上一次注册的清理函数会先执行
3. 组件卸载时，所有清理函数也会自动调用

不是所有场景都替代 watch

如果只关心某个值的变化前后值（oldValue / newValue），或者需要惰性执行（不立即触发）、或监听深层对象的某个固定路径（如 form.profile.address.city），传统 watch 仍更合适。

1. watchEffect 不提供旧值，只有当前值；需要对比时得自己缓存
2. 它默认立即执行一次，想跳过首次运行需配合 onInactivated 或标志位处理
3. 监听 computed 属性没问题，但若 computed 内部有副作用或依赖非响应式数据，行为可能不符合预期