watch是显式监听、惰性执行、可获新旧值、需配置deep；watcheffect是自动追踪、立即执行、只获当前值、默认深度监听。
核心区别就一句话：watch 是你指哪打哪，watchEffect 是它自己盯全场。
监听方式不同：显式指定 vs 自动追踪
watch 必须明确告诉 Vue 要监听谁——可以是 ref、reactive 对象、getter 函数，或它们组成的数组。比如监听 user.name，就得写成 () => user.name；监听多个值，得把它们包进数组里传进去。
watchEffect 不需要你列监听清单。你只管写一个副作用函数，它在首次执行时会自动记录里面所有读取过的响应式数据（比如 count.value、user.profile.avatar），之后只要其中任意一个变了，函数就重跑。
- watch 像设定闹钟：你输入具体时间，到点才响
- watchEffect 像装了运动传感器的灯：有人经过就亮，不挑人也不挑路线
执行时机不同：默认是否立即运行
watch 默认惰性执行——组件挂载后不会立刻触发，只等监听的数据第一次变化才运行。要让它一上来就干活，得加 { immediate: true } 配置。
watchEffect 默认一定义就立刻执行一次，目的就是“先跑一遍，顺便把依赖收全”。这个初始执行不可跳过，也没有 immediate 选项。
- 如果你需要初始化时就同步状态（比如根据当前参数发请求），watchEffect 更省事
- 如果你只想在用户操作后响应（比如输入框内容变才搜索），watch 更克制
能拿到什么值：新旧值对比 vs 当前快照
watch 的回调函数天然接收两个参数：新值 和 旧值。你可以轻松做差异判断，比如跳过空值、过滤重复提交、计算变化幅度。
watchEffect 没有参数。你要用哪个值，就直接在函数体里访问变量，比如 console.log(count.value)。它不提供“上一次是什么”，只反映“现在是什么”。
- 需要对比逻辑（如防抖搜索、仅当值真正改变才更新）→ 选 watch
- 只关心当前状态（如同步 DOM 样式、更新图表数据）→ watchEffect 更直觉
深度监听行为不同：需配置 vs 默认深度
watch 监听 reactive 对象时，默认只看对象引用是否变化（浅监听）。如果对象内部属性改了但引用没变，watch 不会触发——必须手动加 { deep: true }。
watchEffect 对 reactive 对象是默认深度追踪的。哪怕你只写了 user，它也会盯住 user.name、user.address.city 等所有嵌套属性的变化，无需额外配置。
- 监听复杂嵌套对象且不想漏变更 → watchEffect 更省心
- 想精准控制监听粒度（比如只关心 user.id，不关心 user.tags）→ watch 更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
