關於vue的使用計算屬性VS使用計算方法的問題

 在vue中需要做一些計算時使用計算屬性和調用methods方法都可以達到相同的效果,那么這兩種使用方式的區別在哪里:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>//計算屬性
<p>Computed reversed message: "{{ reversedMessage }}"</p>//調用方法
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
methods:{
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
},
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

vue的官方文檔里已經給出了解答

我們將同一個函數定義為一個方法而不是一個屬性,對於最終結果,兩者是一樣的.

然而，不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

這也同樣意味着下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：

computed: {
now: function () {
return Date.now()
}
}

 

相比之下，每當觸發重新渲染時，方法的調用方式將總是再次執行函數。

我們為什么需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。