watcheffect 通过执行时的读取行为自动收集依赖，仅追踪实际访问的响应式数据，依赖随逻辑路径动态更新，组件卸载时自动清理。

watchEffect 自动收集依赖，靠的是函数执行时的“读取行为”——你代码里实际访问了哪个响应式值，Vue 就记下它，后续一变就重跑整个函数。

依赖只在函数执行中被捕捉

watchEffect 一定义就会立刻执行传入的函数。执行过程中，只要读取了 ref.value、reactive 对象的属性 或 computed 的值，Vue 就通过 Proxy 的 getter 拦截，把当前函数登记为那个响应式数据的依赖。

• 写了 searchTerm.value 和 user.profile.city → 这两个就是依赖项
• 用了 if (showDetails) { user.address.zip } → 只有 showDetails 为真时，user.address.zip 才会被追踪
• 没进分支、没执行到的读取语句，不会建立依赖

依赖是动态更新的，不是一成不变

每次函数重新执行，Vue 都会清空旧依赖，再重新扫描这一轮实际读取了哪些响应式值。这意味着依赖关系会随逻辑路径变化而变化。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 第一次执行时 type === 'user'，读了 user.name → 只追踪 user.name
• 第二次 type === 'order'，读了 order.id → 自动转为追踪 order.id，不再关心 user.name
• 不需要手动改监听列表，也不用担心漏掉新字段

不读取，就不追踪

watchEffect 不会预判或扫描整个作用域，它只对真正执行到的读取操作起反应。

• form.user 是 reactive 对象，但只读了 form.user.name → 只追踪 name 字段，form.user.age 改了也不会触发
• 写了 form.status 但被注释掉了，或在未执行的 else 分支里 → 它不会出现在依赖集合中
• 深层嵌套要显式读到底层属性，比如 user.profile.city，不能只读 user.profile

组件卸载时自动停止，避免内存泄漏

watchEffect 创建的副作用默认绑定到当前组件生命周期。组件 unmount 时，它自动停止监听、清除所有依赖关联，不用手动调用 stop 函数（除非你主动用它返回的停止函数做精细控制）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！