Vue.js 計算屬性

小婷子xtt發表於2017-08-17
原文網址 : https://blog.csdn.net/xttcj/article/details/77335102
Vue.js

為什麼需要計算屬性?

模板內的表示式應當只作簡單的運算，防止模板過重且難以維護。

所以，例如：

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

這類邏輯，需要多次確認，導致模板不再簡單和清晰。



什麼是計算屬性？




<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('')
    }
  }
})






在computede中宣告瞭reversedMessage，即宣告瞭一個計算屬性reversedMessage。


我們提供的函式將用作屬性vm.reversedMessage的getter。


vm.reversedMessage的值始終取決於vm.message的值。


vm.message發生改變時，所有依賴於vm.reversedMessage的繫結也會更新。


計算屬性vs Methods


通過呼叫表示式中的method可以達到同樣的效果：


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




// in component
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}





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


相比而言，只要發生重新渲染，method呼叫總會執行該函式。


計算屬性使用場合：不是直接使用瀏覽器重新整理頁面，改變資料、DOM操作等引起頁面重新渲染時，計算屬性會直接使用快取，不會重新執行函式。適合計算量很大且改變頻率低的屬性。適用於對多資料變動進行監聽，維護一個狀態。






            




相關文章