为什么观察者比计算更适合执行异步或昂贵的操作以响应 vue.js 中的数据变化？

Question

的文档Vue.js说：

使用该watch选项允许我们执行异步操作（访问 API），限制我们执行该操作的频率，并设置中间状态直到我们得到最终答案。对于computed房产来说，这一切都不可能。

在同一页面上，我们可以看到computedproperty 使用与watcher.

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

所以我的问题是支持上述声明或限制我们使用computed属性而不是属性的技术原因是什么watchers？

Answer 1

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

1. 当computedprop getter（由您提供的函数）运行时，Vue 正在监控data访问了哪些其他响应式，因此它知道结果依赖于哪些数据
2. getter 的结果被 Vue 缓存
3. 每当您访问computedprop的值时，都会执行一小段 Vue 代码 - 它首先检查它是否在缓存中具有值，如果是，则某些输入是否与上次执行 getter 时发生了变化。如果有一个值并且没有更改，则根本不执行 getter 而是返回缓存的值

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

昂贵的

昂贵的计算是究竟什么样computed的道具是因为吸气执行只在需要的时候。但是每次发生变化时都会执行它，这并不总是您想要的。因此，当您有一些值流时，文档正在讨论用例 - 假设用户输入 - 并且您希望仅在她停止 200 毫秒后执行操作。或者您有一些数据流（遥测）但只想每 2 秒更新一次图表

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

异步

正如我之前所说，Vue 期望computedgetter 返回一个值。当你在computedprop getter 中运行一些异步调用时，你没有返回值（在基于回调的异步的情况下 - 但JS 函数总是返回一些东西）或者你有一个未来值的承诺。所以 Vue 获取您的函数（undefined或承诺）的结果并将其存储在缓存中……这是您不想要的。因此，如果涉及任何异步，watch总是更好......