Vue 中 Watch 与 WatchEffect 的差异

在Vue的响应式编程中，Watch和WatchEffect是两个用于处理数据变化的重要工具，虽然它们都能对数据变化做出响应，但在使用方式和功能特性上存在一些明显的差异。

从使用方式上看，Watch需要明确指定要监听的数据源。它接收一个响应式数据作为第一个参数，第二个参数是一个回调函数，当被监听的数据发生变化时，这个回调函数就会被执行。例如：

watch(() => state.count, (newValue, oldValue) => {
  console.log('count changed:', newValue, oldValue);
});

而WatchEffect则不需要指定具体的监听目标。它会自动追踪回调函数中使用到的所有响应式数据，当这些数据发生变化时，回调函数就会重新执行。例如：

watchEffect(() => {
  console.log('count value:', state.count);
});

在执行时机上也有所不同。Watch在初次渲染时不会立即执行回调函数，只有当监听的数据发生变化时才会执行。而WatchEffect在组件挂载时会立即执行一次回调函数，以获取初始状态。

Watch可以获取到数据变化前后的值，通过回调函数的参数可以方便地进行对比和处理。但WatchEffect无法直接获取到旧值，它更侧重于根据新的数据状态来执行相应的操作。

另外，Watch可以通过配置选项来控制一些行为，比如设置是否深度监听、是否立即执行等。WatchEffect相对来说更加简洁和自动化，适用于一些简单的场景，当只需要根据数据变化来执行一些副作用操作时，使用WatchEffect会更加方便。

Watch和WatchEffect在Vue中都有各自的应用场景。如果需要精确控制监听的数据源、获取数据变化前后的值以及进行一些复杂的逻辑处理，那么Watch可能更合适；如果只是想简单地根据数据变化来执行一些操作，且不需要关心旧值，那么WatchEffect会是一个不错的选择。