## 計算屬性 * 基本使用：computed 可以實現數據的計算，可以理解為一個具體的執行方法，返回數據值 ~~~ <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) ~~~ * 與methods對比 computed計算的數據會被緩存，只要原來的參數不改變，它的數據就不會變化。而methods每當頁面刷新都會變化。 我們為什么需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代。 * 與watch屬性的對比 watch屬性用來觀察和響應 Vue 實例上的數據變動。 兩者相比，如果我們需要數據變化后的結果，只要關注結果和影響的參數就好，而不用去跟蹤每個影響的參數。 * 計算屬性 setter 計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter 。比如原來的全名是li long 拼接起來的，當全名變成zhang hong 之后，對應的firstname lastname也會發生改變。 ~~~ computed: { fullName: { // getter 方法執行時可以達到的數值 get: function () { return this.firstName + ' ' + this.lastName }, // setter 當計算屬性發生改變的時候可以影響設置其他值 set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } ~~~