Vue2学习笔记：vue计算属性

一、计算属性

什么时候会用到计算属性？

当绑定的数据逻辑较为复杂时！

例如：

传入的javascript表达式较为复杂

①基础例子

html js console

Vue 知道vm.reversedMessage依赖于vm.message，因此当vm.message发生改变时，依赖于vm.reversedMessage的绑定也会更新。

②计算缓存 vs Methods（计算属性是基于它的依赖缓存）

为什么会这样呢？因为computed下定义的方法有计算缓存，而methods下的方法没有。

我们为什么需要缓存？假设我们有一个重要的计算属性A，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的 getter ！如果你不希望有缓存，请用 method 替代。

③计算属性 vs Watched Property（观察vue实例上的数据变动）

显然computed更佳

④计算setter

现在在运行vm.fullName = 'John Doe'时， setter 会被调用，vm.firstName和vm.lastName也会被对应更新。

二、观察Watchers（watch学到的不多，倒是发现一个有趣的api、限制操作频率的lodash以及axios）

在这个示例中，使用watch选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

学好Vue！

成为优秀的前端工程师！