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

李文楊發表於2017-09-28
Vue

 在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！如果你不希望有快取，請用方法來替代。

相關文章