Vue源碼：計算屬性的實現原理

在Vue中有一個計算屬性，只要在它的函數裏引用了 data 中的某個屬性，當這個屬性發生變化時，函數就可以嗅探到這個變化，並自動重新執行。

 Vue 怎麼知道計算屬性在函數中引用了哪個 data 屬性？這個函數又是怎麼知道 data 屬性變了，而且只關心它內部引用的那個屬性，別的都不管？

以下是官方的描述：

由於涉及 Vue 的響應式綁定的原理，如果你對此不熟，最好先看看Vue源碼：雙向綁定的實現原理

那麼接下來，來看看實現過程：

      1. 首先 b 屬性會被處理爲存取器屬性，訪問 b 就會觸發其 get 函數。

      2. 處理計算屬性 a 時，會執行 a 的函數，從而會執行 this.b，於是觸發 b 的 get 函數。

      3. b 的 get 函數會添加 b 屬性的依賴項，而剛纔在處理計算屬性過程中，a 已經作爲依賴項被傳給了一個全局變量，b 的 get 函數會檢測到這個全局變量，並將其添加到自身的訂閱者列表中。

      4. 對 b 賦予新的值時，會觸發其 set 函數，set 函數中會遍歷執行訂閱者，a 的值就是在這個時候更新的。

1、實現defineReactive

它用於初始化data中的數據，轉爲存取器， get：該函數通過閉包，維護每個屬性單獨的dep,定義計算屬性時，計算屬性綁定的函數引用了哪些data中屬性，就會觸發get方法，向該屬性的dep中添加響應函數設置值時，會將閉包的deps中所有函數，全部循環遍歷執行一遍。

// 定義全局屬性，用於向dep傳送計算屬性函數
var Dep = null

function defineReactive(obj, key, val) {
      var deps = [];
      Object.defineProperty(obj, key, {
        get: function () {
          if (Dep) {
            deps.push(Dep)
          }
          return val
        },
        set: function (newVal) {
          val = newVal;
          deps.forEach(func => func())
        }
      })
    }

2、實現defineComputed

它用於在定義計算屬性時，如果綁定函數引用了vue實例data對象中的屬性，則會向該屬性deps中添加綁定的函數。

function defineComputed(obj, key, func) {
      func = func.bind(obj);
      let value;
      // 首次定義計算屬性，會將第一次的函數執行結果返回給該計算屬性，
      // 此後由於閉包，以後該計算屬性的value值，會由deps中的函數返回值來決定。
      Dep = function () {
        value = func();
        console.log('Dep中value',value)
      };
      // 執行一次func，函數引用了哪些data中屬性，就會觸發get方法，向該屬性的dep中添加響應函數
      // 在這又使用了閉包，保存計算結果，在get中返回出去
      value = func();
      console.log('defineComputed中value',value)
      // 銷燬Dep
      Dep = null;
      // 獲取計算屬性時，返回函數計算結果
      Object.defineProperty(obj, key, {
        get: function () {
          // 返回函數結果
          return value
        }
      })
    }

測試結果

var obj = {}

    defineReactive(obj, 'a', 0);
    defineComputed(obj, 'b', function () {
      let storeVal = this.a;
      return storeVal + 1
    })

console.log(obj.b) // 1
obj.a += 1
console.log(obj.b) // 2
obj.a += 1
console.log(obj.b) // 3

通過對存取器屬性、閉包和觀察者模式的綜合運用，Vue 巧妙的實現了計算屬性，可以看出，Vue 響應式系統的核心理念是“依賴”，DOM 節點之所以隨數據而變化，是因爲節點依賴於數據，計算屬性之所以隨數據而變化，是因爲計算屬性依賴於數據。做好響應式的關鍵就在於處理好依賴關係。

參考資料：Vue.js 計算屬性的祕密