watch 和 watchEffect 的区别

在 Vue 3 中，watch 和 watchEffect 都是 Composition API 的一部分，用于观察组件中响应式数据的变化并执行副作用。尽管它们的功能相似，但在使用方式和行为上存在一些关键的区别：

watch

1. 显式依赖：watch 需要明确指定它要监听的数据源（响应式引用或计算属性）。这可以是单个值或一个包含多个值的数组。

2. 惰性执行：watch 是惰性的，这意味着它不会在组件创建时立即执行，只有在监听的数据发生变化时才会执行回调。

3. 回调参数：watch 的回调函数可以接收两个参数：新值和旧值，这使得你可以比较变化前后的值。

4. 取消监听：你可以通过调用返回的函数来停止 watch 的监听。

5. 配置选项：watch 可以接受一个配置对象，其中包括 immediate（立即执行回调）、deep（深度监听对象内部值的变化）等选项。

watchEffect

1. 隐式依赖：watchEffect 会在内部自动追踪其回调中访问的所有响应式属性，无需明确指定依赖。

2. 立即执行：watchEffect 会在组件创建时立即执行一次，以便收集其依赖项，之后每当依赖项发生变化时，它都会重新执行。

3. 无回调参数：watchEffect 的回调函数没有参数，因为它不关心具体哪个依赖项变化了，它只关心是否有依赖项变化。

4. 不可取消：watchEffect 没有提供取消监听的机制。

5. 配置选项：watchEffect 也接受一个配置对象，但通常不需要指定依赖，因此 deep 和 immediate 这样的选项并不常见。

总结

• watch 更适合于你知道具体要监听哪些数据变化的情况，它提供了更多的控制，如比较新旧值、配置立即执行或深度监听。
• watchEffect 更适合于你想要在多个数据变化时执行相同副作用的情况，不需要明确指定依赖项，但无法获取变化前后的值，也无法取消监听。

选择 watch 还是 watchEffect 取决于你的具体需求和场景。