watchEffect通过ReactiveEffect机制自动收集依赖：执行时拦截ref.value、reactive属性等响应式读取并标记为依赖，变化时重跑函数动态更新依赖集合，组件卸载时自动清理。
watchEffect 的核心能力就是自动收集依赖——你不用告诉它“盯谁”，它自己在执行时“看到谁就记下谁”。只要数据是响应式的（ref、reactive、computed），且你在函数里真正读取了它的值，就会被追踪。
哪些值会被自动追踪？
只有满足以下条件的访问才会建立依赖：
- 必须是响应式对象：ref.value、reactive 的属性、computed 的返回值，这些能被 Vue 的 Proxy 或 ref 拦截器捕获
- 必须实际执行到并读取：比如写在 if 分支里，只有分支为真时，里面的响应式读取才计入依赖；没走过的代码不会触发收集
-
必须显式访问深层属性：写
user.value.name才会追踪 name；只写user.value不会追踪 name 变化
怎么验证依赖是否被正确收集？
利用 watchEffect 的调试钩子 onTrack，可以实时看到哪些值被纳入依赖：
```js
watchEffect(
() => { console.log('count:', count.value) },
{ onTrack(e) { console.log('追踪了:', e.key, 'in', e.target) } }
)
```
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
控制台会输出类似 追踪了: value in RefImpl，说明 count.value 已被识别为依赖项。
常见漏追踪场景及应对
有些写法看似用了响应式数据，实则无法被收集：
-
只解构不读取：写
const { name } = user但没用到name，不会追踪 user.name -
传入函数但未调用：写
someFn(user)而不是someFn(user.value)，user 对象本身不会触发 getter -
数组索引访问未触发响应：
list[0]不会追踪 list 第一项变化，应改用list.at(0)或确保访问的是响应式元素本身
依赖是动态更新的
每次函数重新执行，Vue 都会清空旧依赖，重新扫描本次执行中读取的所有响应式值。这意味着：
- if 分支切换后，依赖集合会自动增减
- 上一次读取了
a.value，这一次读取了b.value，那 a 就不再被监听 - 组件卸载时，所有依赖自动清理，无需手动 stop
