vue中的computed屬性

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...