为什么观察者比计算机更好地执行异步或昂贵的操作来响应vue.js中不断变化的数据？

Question

Vue.js的文档显示：

使用watch选项，我们可以执行异步操作(访问API)，限制执行该操作的频率，并在得到最终答案之前设置中间状态。对于computed属性，所有这些都是不可能的。

在同一页上，我们可以看到computed属性使用与watcher相同的函数。

参考： https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

因此，我的问题是，支持上述语句或限制我们使用computed属性而不是watchers的技术原因是什么？

Answer 1

理解computed属性在Vue中的工作方式是很重要的。在大多数情况下，开发人员给Vue的是一个getter，它是一个函数，它定义了计算属性的值是如何计算的。

1. (由您提供的函数)运行时，Vue监视访问哪些其他反应性data，以便它知道结果取决于什么数据，无论何时访问computed支柱值，Vue
2. 都会缓存getter的
3. 结果--它首先检查它在缓存中是否有值，如果是，一些输入是否与上次执行getter时不同。如果有值而没有更改，则根本不执行getter，而是返回缓存的值

。

你问题的标题提到“异步或昂贵”..。

贵

昂贵的计算就是，正是computed道具的用途，因为当需要时，getter只执行，只执行。但是，每次发生变化时都会执行，而这并不总是您想要的。因此，当您有一些值流(比如用户输入)时，docs正在讨论用例，您希望只在她停止200‘s之后执行操作。或者您有一些数据流(遥测)，但希望每2秒更新一次图表。

这在computed中是不可能的，因为Vue 希望getter每次都返回值，并且该值存储在缓存中，以便将来使用。

异步

正如我前面所说的，Vue期望computed getter返回一个值。当您在computed支柱getter中运行异步调用时，您没有任何值可返回(在基于回调的异步情况下--但是是JS functions always return something)，或者您对未来的值有一个承诺。因此，Vue获取函数的结果(undefined或允诺)并将其存储在缓存...which中，这是您不想要的。所以如果涉及到任何异步，watch总是更好.

Answer 2

计算的属性监视(观察)在其他属性中发生变化，并根据这些属性对进行计算，返回值；另一方面，Watcher属性观察one property中的更改，并基于该属性运行一些逻辑，不返回任何值。

因此，如果您的用例需要在做了一些计算后返回一个值，请使用计算，否则，如果您需要在属性更改后运行一些操作，则应该使用watch。

Watcher属性可以观察计算的属性更改，因为计算的属性返回值，但不能使用基于观察者属性的计算属性。