一、計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

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

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里想要顯示變量 message 的翻轉字符串。當想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。

所以，對于任何復雜邏輯，你都應當使用計算屬性。

1、基礎例子

你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴于 

vm.message，因此當 vm.message 發生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的 getter 函數是沒有副作用 (side effect) 的，這使它更易于測試和理解。

2、計算屬性緩存 vs 方法

我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算