watchEffect 能自动收集依赖，无需手动指定监听项，执行回调时自动追踪所有读取的响应式数据，后续任一变化即重新执行；支持清理函数和多种执行时机，但不提供新旧值对比且默认立即执行。
watchEffect 能自动收集依赖，不用手动写 watch 里那些字符串或函数形式的依赖项，代码更简洁、更少出错。
自动追踪响应式数据变化
传统 watch 需要明确指定监听谁，比如 watch(() => count.value, ...) 或 watch('count', ...)，稍不注意就漏掉深层属性或计算逻辑。而 watchEffect 会执行一次回调，在执行过程中“路过”的所有响应式数据（ref、reactive、computed）都会被自动记录为依赖。
- 只要在回调里读取了
user.name、list.length、isReady，它们就自动成为监听目标 - 后续任意一个变化，回调都会重新运行
- 无需关心是 ref 还是 reactive，也不用展开对象或写 getter 函数
适合副作用逻辑集中、依赖动态的场景
当一段副作用（比如发请求、更新 DOM、同步本地存储）依赖多个分散的响应式状态，且这些依赖可能随条件变化时，watchEffect 更自然。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 例如：搜索框 + 筛选条件 + 分页页码同时影响请求参数，直接在
watchEffect里拼api.search({ q, type, page })就行 - 如果某个条件未启用（比如
type是null），它没被读取，就不会加入依赖 —— 自动按需响应 - 避免手动维护一长串依赖数组，也避免因条件分支导致依赖遗漏
注意清理和执行时机控制
watchEffect 默认在组件更新前执行（flush: 'pre'），适合需要同步更新 DOM 的逻辑；也可设为 'post' 或 'sync'。它还提供清理函数，用于中断异步操作：
立即学习“前端免费学习笔记（深入）”；
- 回调接收一个
onInvalidate参数，调用它可注册清理逻辑（如取消上一次请求） - 每次新副作用运行前，上一次注册的清理函数会先执行
- 组件卸载时，所有清理函数也会自动调用
不是所有场景都替代 watch
如果只关心某个值的**变化前后值**（oldValue / newValue），或者需要**惰性执行**（不立即触发）、或监听**深层对象的某个固定路径**（如 form.profile.address.city），传统 watch 仍更合适。
-
watchEffect不提供旧值，只有当前值；需要对比时得自己缓存 - 它默认立即执行一次，想跳过首次运行需配合
onInactivated或标志位处理 - 监听 computed 属性没问题，但若 computed 内部有副作用或依赖非响应式数据，行为可能不符合预期
