Vue3中的watch和watchEffect的区别

Vue3中的watch和watchEffect是两种不同的响应式数据监听方式，它们的主要区别在于执行时机、依赖收集以及使用方法上：

1. 执行时机：•watchEffect：在被调用时立即执行，并且每当其依赖的响应式属性变化时会再次执行。这意味着watchEffect内部的副作用函数无论何时注册都会立刻运行一次，以便收集依赖。•watch：惰性执行，仅当所监听的源数据发生变化时才触发回调函数执行。默认情况下，它不会在初始化时执行。

2. 依赖收集：•watchEffect：自动收集并追踪在其副作用函数中使用的响应式依赖，无需手动指定监听哪些属性。•watch：需要显式地指定要监听的源（可以是一个对象、一个属性或者一个getter函数），并且在回调函数中处理新旧值的变化。

3. 参数与回调：•watchEffect：接收一个副作用函数作为参数，在该函数内可以直接访问并引用响应式状态，不需要返回值。•watch：需要两个参数，第一个是要监听的数据源，第二个是回调函数。回调函数会接收到新的值(newVal)和旧的值(oldVal)，在某些场景下可以利用这两个参数来对比变化。

4. 应用场景：•watchEffect：适合于那些需要根据多个响应式状态进行计算或更新DOM的场景，例如设置某个元素的样式基于多个变量动态计算而来。•watch：更适合用于对特定的单一或复杂数据对象进行深度监听，并在数据变更时执行特定的逻辑，比如表单验证、状态同步等。