Vue 的计算属性 computed

写法：

```

computed: {

// 计算属性的 gette

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

}

```

用法：

```

<div id="example">

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

```

计算属性允许我们对指定的视图，复杂的值计算。

这些值将绑定到依赖项值，只在需要时更新。

### [计算属性缓存 vs 方法]

通过在表达式中调用方法来达到同样的效果：

```

<p>Reversed message: "{{ reversedMessage() }}"</p>

```

```

// 在组件中

methods: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

```

我们可以将同一函数定义为一个方法而不是一个计算属性。

两种方式的最终结果确实是完全相同的。

然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。

只在相关响应式依赖发生改变时它们才会重新求值。

这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数