16

所以我一直在学习 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

4

4 回答 4

12

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

  • 只接受一个函数
    • watch可以接受一个函数或一个或多个反应属性。
  • 在定义和反应性依赖改变时立即运行
    • watch仅在反应性依赖项更改时运行
于 2020-03-03T16:53:44.530 回答
10

我会使用：

  • 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

于 2020-05-01T03:51:56.403 回答
6

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

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

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

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

于 2021-05-19T20:15:28.053 回答
6

watch帮助我理解 Vue 3和Vue 3之间的区别是watchEffect考虑副作用。watchEffectcomputed

钩子的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 与 watchEffect 何时使用 Vue.js

于 2021-04-05T14:51:19.910 回答