在 Vue 3 中,watch
和 watchEffect
都是 Composition API 的一部分,用于观察组件中响应式数据的变化并执行副作用。尽管它们的功能相似,但在使用方式和行为上存在一些关键的区别:
watch
-
显式依赖:
watch
需要明确指定它要监听的数据源(响应式引用或计算属性)。这可以是单个值或一个包含多个值的数组。 -
惰性执行:
watch
是惰性的,这意味着它不会在组件创建时立即执行,只有在监听的数据发生变化时才会执行回调。 -
回调参数:
watch
的回调函数可以接收两个参数:新值和旧值,这使得你可以比较变化前后的值。 -
取消监听:你可以通过调用返回的函数来停止
watch
的监听。 -
配置选项:
watch
可以接受一个配置对象,其中包括immediate
(立即执行回调)、deep
(深度监听对象内部值的变化)等选项。
watchEffect
-
隐式依赖:
watchEffect
会在内部自动追踪其回调中访问的所有响应式属性,无需明确指定依赖。 -
立即执行:
watchEffect
会在组件创建时立即执行一次,以便收集其依赖项,之后每当依赖项发生变化时,它都会重新执行。 -
无回调参数:
watchEffect
的回调函数没有参数,因为它不关心具体哪个依赖项变化了,它只关心是否有依赖项变化。 -
不可取消:
watchEffect
没有提供取消监听的机制。 -
配置选项:
watchEffect
也接受一个配置对象,但通常不需要指定依赖,因此deep
和immediate
这样的选项并不常见。
总结
watch
更适合于你知道具体要监听哪些数据变化的情况,它提供了更多的控制,如比较新旧值、配置立即执行或深度监听。watchEffect
更适合于你想要在多个数据变化时执行相同副作用的情况,不需要明确指定依赖项,但无法获取变化前后的值,也无法取消监听。
选择 watch
还是 watchEffect
取决于你的具体需求和场景。