Vue 3 Composition API - watchEffect 与 watch

Question

所以我一直在学习 Vue Composition API，想知道 watchEffect 和 watch 之间的区别是什么。 Watch 说它和 Vue 2 手表一样，所以我猜 watchEffect 就像那个 2.0 一样？我想知道是否有任何特定情况下一个人比​​另一个人有很大的优势，比如停止 watchEffect 然后重新激活它而不是在普通手表中使用布尔值......或者他们只是基本上不同的方式写同样的东西。

谢谢！

参考：

观看效果：https://vue-composition-api-rfc.netlify.com/api.html#watcheffect

观看：https://vue-composition-api-rfc.netlify.com/api.html#watch

Answer 1

watchEffect 似乎是简化的watch，主要区别是

• 只接受一个函数
  • watch 可以接受一个函数或一个或多个反应属性。
• 在定义和反应性依赖关系发生变化时立即运行
  • watch 仅在响应式依赖项发生变化时运行

Answer 2

我会使用：

• watchEffect 当我想查看多个反应属性并且我不关心旧值时
• watch 当我想观看一个特定的反应属性并且我可能想要旧值时

注意，以上是我使用它们的目的，但可能不是它们的唯一用途。

也可以在有关差异的文档中找到：

Compared to watchEffect, watch allows us to:

Perform the side effect lazily;
Be more specific about what state should trigger the watcher to re-run;
Access both the previous and current value of the watched state.

来源：https://composition-api.vuejs.org/api.html#watch

Answer 3

watchEffect 是在 Vue3 中引入的，它的组合 api。据我了解，同时拥有watchEffect 和watch 的原因是为了使watch 的语义尽可能接近Vue2。 watchEffect的诞生，有兴趣的可以追溯到here和here

就目前而言，watchEffect 是一个即时/热切的手表，它使用更简洁/一致的语法（与计算一致）：

1. watchEffect 不接受显式监视源，而是通过立即执行回调（或在源代码中调用它的效果）自动找出所有依赖项，类似于 computed作品。因此watchEffect 必须立即运行效果。正因为如此，在设置watchEffect 时，有一个常见的陷阱（至少我必须不断提醒自己）：你需要确保在你的watchEffect 的第一次执行期间，所有的依赖项确实被访问了。某些依赖项如何避免被访问？注意条件语句。
2. 如上所述，watchEffect 将立即生效。
3. watchEffect 是一个深度手表。我不确定这是不是有意的。如果您在效果内使用响应式对象，则对该对象的任何更改都会导致效果重新运行，即使更改后的属性不是您访问或嵌套的属性。

如果 Vue 3 是从零开始设计的，或者不考虑保持向后兼容性，我想只有watchEffect

Answer 4

帮助我理解 Vue 3 中 watch 和 watchEffect 之间区别的原因是将 watchEffect 视为具有副作用的 computed。

watchEffect() 钩子的工作方式类似于 computed() 钩子或 computed 选项，但不是返回值，而是使用它来触发副作用。

当您想在单个反应值发生变化时触发副作用时，请使用watch。

// Triggers whenever `user` is updated.
watch(user, () => doSomething({ user: user.value, profile: profile.value }))

当您需要查看多个反应值并在其中任何更新时触发副作用时，请使用watchEffect。

// Triggers whenever `user` *or* `profile` is updated.
watchEffect(() => doSomething({ user: user.value, profile: profile.value }))

见：watch vs. watchEffect when to use what with Vue.js