// 方法

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

// 在元件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

// 計算屬性

<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: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split('').reverse().join('')
    }
  }
})

　　使用方法，每當觸發重新渲染時，呼叫方法將總會再次執行函式。

　　兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函式。

　　我們為什麼需要快取？假設我們有一個性能開銷比較大的計算屬性A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於A。如果沒有快取，我們將不可避免的多次執行A的 getter！如果你不希望有快取，請用方法來替代。