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 计算属性的秘密