Vue.js的计算属性（computed properties）

一、起因？

虽然在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。比如：

<div id="example"> 
 {{ message.split('').reverse().join('') }}
 </div>

这样，模板不再简单和清晰。在实现反向显示 message 之前，你应该通过一个函数确认它。所以，Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑。

计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

案例如下：

image

在上面的案例中，计算属性fullname 和 reverse 的值始终取决于firstname 和 lastname。计算属性默认只有 getter ，当然在需要时我们也可以提供一个 setter 。计算属性被设计出来的目的在于：getter 是干净无副作用的。

二、计算属性 和 Methods的区别？

当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。

如果不希望有缓存，我们可以用method取代computed。

疑惑：为什么需要缓存？

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

三、计算属性的setter方法

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

image

运行结果：

image