vue中的computed屬性

晴雨稀兮發表於2018-05-29
Vue

1 computed屬性的實現原理

  1. Vue例項初始化時，給data的每個屬性(dataKey)都新增getter和setter方法
  2. 計算屬性computed初始化時，提供的函式將作為對應屬性(computedKey)的getter方法
    其中，
    computedKey: function(){
        return this.dataKey+`change`
     }
  1. 當首次獲取計算屬性的值是，dep開始收集依賴，即收集到dataKey和computedKey的依賴關係
  2. 在dataKey變化時，此時會呼叫dataKey的getter方法，通過dep收集的依賴，可以判定出data與computed對應資料的依賴關係
  3. 此時可以做到，在data發生變化時，computed屬性資料也發生變化

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

在模板檔案中，只需要寫reversedMessage即可，它與message是有依賴關係的。

3.computed屬性與watch的區別

  1. 當需要資料在非同步變化或者開銷較大時，執行更新，使用watch會更好一些；而computed不能進行非同步操作；
  2. computed可以用快取中拿資料，而watch是每次都要執行函式計算，不管變數的值是否發生變化，而computed在值沒有發生變化時，可以直接讀取上次的值

4.computed屬性與methods的區別

  1. 在模板檔案中，computed屬性只需要寫{{reverseMessage}}，而methods需要寫成{{reverseMessage()}}，最明顯的區別就是methods是方法，需要執行；
  2. computed屬性只有在依賴的data放生變化時，才會重新執行，否則會使用快取中的值，而methods是每次進入頁面都要執行的，有些需要每次進入頁面都執行的方法，需要使用methods，而computed屬性比較節約。

參考文獻

原理：https://segmentfault.com/a/11…
用法：https://cn.vuejs.org/v2/guide…

相關文章