Vue3中的watchEffect和watch有什么区别？开发中该怎么选？

最近不少刚转Vue3的小伙伴问我，watch和watchEffect看起来都是用来监听数据变化处理副作用的API，为啥Vue3要同时保留两个？实际写代码的时候到底用哪个更合适？今天就把我这两年用Vue3做了十多个项目的实操经验整理出来,看完你再也不会搞混这两个API了。

先搞懂两者的基础定位

首先得明确，这俩本质上都是用来监听响应式数据变化、触发对应的副作用逻辑（比如发请求、修改DOM、存缓存这类），只是设计思路和适用场景有区别。 watch是Vue从2.x版本就保留下来的核心API，到了Vue3做了Composition API的适配，核心定位是**受控的精准监听**，所有监听规则都由开发者手动定义，可控性极强，而watchEffect是Vue3新增的API，设计思路更偏向声明式的自动监听，不用开发者手动指定监听对象，Vue会自动收集回调里用到的响应式数据作为依赖，写起来更简洁。

两者的核心差异点，看完再也不会混

我把两者最核心的差异整理成了5个维度，不用死记硬背，对着场景对号入座就行： 第一个差异是默认执行时机不同，watch默认是惰性执行的，也就是说页面第一次加载完成的时候，不会触发回调，只有你监听的依赖项真的发生变化了才会运行逻辑，当然你要是需要第一次加载就执行，可以手动加`immediate: true`的配置项