关于vue.js:vue响应式系统变化检测

变动侦测分为两种类型，一种是“”推，另一种是“拉”。
Angular和react的变动侦测都属于“拉”，也就是说，当状态发生变化时，它不晓得哪个状态发生变化了，只晓得状态有可能扭转了，而后就会发送一个信号通知框架，框架收到信号后，就会进行一个暴力比照找到哪些DOM须要从新渲染的。这也是Angular的脏查看（基于zoom.js,利用$digest函数触发）的过程，react用的是虚构DOM。
Vue的变动侦测属于“推”。当状态发生变化，Vue在肯定水平上能马上晓得哪些状态产生扭转，具备更细粒度的更新；也因为粒度越细，每个状态绑定的依赖就越多，依赖追踪在内存中的开销就越大，因而，Vue也引入了虚构DOM的概念，将一个状态的细粒度绑定到组件（Vue的另一外围：单文件组件化），这样子当状态产生扭转，就会告诉到组件，组件外部再应用虚构DOM进行比照更新。
家喻户晓，Vue2.x的版本应用Object.defineProperty,Vue3.x应用ES6的Proxy来进行变动侦测的。上面次要讲Object和Array的变动侦测：
（注：以下代码块来自Vue2.6.10源码）

一、Object的变动侦测
1.Object通过Object.defineProperty将属性转换成getter/setter的模式来追踪变动，在getter中收集依赖，在setter中触发依赖。

第一版Object.defineProperty：

function defineReactive$$1 (obj, key, val) {
     Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        return val
      },
      set: function reactiveSetter (newVal) {
         if(val === newVal){
            return
         }
         val = newVal;
      }
    });
  }
    

2.在getter中收集依赖，依赖被存储在Dep中，在Dep中对依赖进行增加，删除以及更新等操作。

Dep的封装：
var uid = 0;
var Dep = function Dep () {
    this.id = uid++;
    this.subs = [];
  };

  Dep.prototype.addSub = function addSub (sub) {
    this.subs.push(sub);
  };

  Dep.prototype.removeSub = function removeSub (sub) {
    remove(this.subs, sub);
  };

  Dep.prototype.depend = function depend () {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  };

  Dep.prototype.notify = function notify () {
    // stabilize the subscriber list first
    var subs = this.subs.slice();
    for (var i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  };

  // The current target watcher being evaluated.
  // This is globally unique because only one watcher
  // can be evaluated at a time.
  Dep.target = null;
  var targetStack = [];

  function pushTarget (target) {
    targetStack.push(target);
    Dep.target = target;
  }

  function popTarget () {
    targetStack.pop();
    Dep.target = targetStack[targetStack.length - 1];
  }
  function remove (arr, item) {
    if (arr.length) {
      var index = arr.indexOf(item);
      if (index > -1) {
        return arr.splice(index, 1)
      }
    }
  }

第二版Object.defineProperty：

function defineReactive$$1 (obj,key,val) {
    var dep = new Dep();//新增
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        if (Dep.target) {//新增
          dep.depend();//新增
        }
        return val
      },
      set: function reactiveSetter (newVal) {
        if (newVal === val) {
          return
        }
        val = newVal;
        dep.notify();//新增
      }
    });
  }

3.所谓的依赖就是wather，只有watcher触发的getter就会去收集依赖到Dep中去，当数据发生变化时，会循环依赖列表，把所有的watcher告诉一遍。
watcher原理：先把本人设置到全局惟一的指定地位（pushTarget(this)），而后读取数据（ value = this.getter.call(vm, vm);）触发该数据的getter。接着，在getter中就会从全局惟一的那个地位读取正在读取数据的watcher，并把这个watcher收集到Dep中。

  /**
   * A watcher parses an expression, collects dependencies,
   * and fires callback when the expression value changes.
   * This is used for both the $watch() api and directives.
   */
  var Watcher = function Watcher (vm,expOrFn,cb) {
    this.vm = vm;
    this.cb = cb;
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      this.getter = parsePath(expOrFn);//parsePath读取一个字符串的keypath
    }
  };

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  Watcher.prototype.get = function get () {
    pushTarget(this);//this就是以后watcher实例。看下面的pushTarget，把watcher实例赋值给Dep。target
    var value;
    var vm = this.vm;
    try {
      value = this.getter.call(vm, vm);//读取值的时候，触发getter，就能够将this被动增加到Dep(依赖收集)
    } catch (e) {
        throw e
    } finally {
      
    }
    return value
  };
  /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  Watcher.prototype.update = function update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      this.run();
    } else {
      queueWatcher(this);
    }
  };

4.创立Observer办法递归object中的所有数据（包含子数据）都转换成响应式模式。只有Object类型才会调用walk将每个属性转换成getter/setter模式侦测，在defineReactive$$1中新增observe（new Observer(value);）来递归子属性。

var Observer = function Observer (value) {
    this.value = value;
    if (Array.isArray(value)) {
    } else {
      this.walk(value);
    }
  };
    Observer.prototype.walk = function walk (obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
      defineReactive$$1(obj, keys[i]);
    }
  };

5.无奈跟踪新增属性和删除属性，能够用Vue提供的vm.$set和vm.$delete解决
6.总结图解：

二、Array的变动侦测
1.在Observer中应用拦截器笼罩那些行将转换成响应式的Array类型数据的原型。（value.__proto__=Object.create(Array.prototype);）

function copyAugment (target, src, keys) {
  for (var i = 0, l = keys.length; i < l; i++) {
    var key = keys[i];
    def(target, key, src[key]);
  }
}
 function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }
  //鉴于有些浏览器不反对__proto__属性，在这个判断对象中是否有__proto__
  var hasProto = '__proto__' in {};
  var arrayKeys = Object.getOwnPropertyNames(arrayMethods);
  var Observer = function Observer (value) {
  this.dep = new Dep();//创立一个Dep实例，寄存依赖列表
  def(value, '__ob__', this);//在value上减少一个不可枚举的属性__ob__，这个属性的值是Observer实例。这样就能够通过__ob__拜访Observer实例，
  if (Array.isArray(value)) {
      if (hasProto) {
      //__proto__是指向原型的，通过它来笼罩侦测数据的原型;Object.create返回一个带有Array原型对象和属性的新对象。
        value.__proto__=Object.create(Array.prototype);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
    }
  };

2.Array也是在getter中收集依赖，在拦截器中触发依赖，并将依赖保留在Observer实例的Dep中。
function observe (value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else {
      ob = new Observer(value);
    }
    
    return ob
  }
function defineReactive$$1 (obj, key, val) {
     var childOb = observe(val);//为val创立Observer实例
     Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
      if (childOb) {
           childOb.dep.depend();//收集依赖
         }
        return val
      },
      set: function reactiveSetter (newVal) {
         if(val === newVal){
            return
         }
         val = newVal;
      }
    });
  }

3.向依赖发送告诉（通过this.__ob__拜访Observer实例，调用Observer中Dep的notify发送告诉依赖）

var methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
  ];

  /**
   * Intercept mutating methods and emit events
   */
  methodsToPatch.forEach(function (method) {
    def(arrayMethods, method, function mutator () {
      var ob = this.__ob__;//重点
      var inserted;//获取数组中的新增元素
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args;
          break
        case 'splice':
          inserted = args.slice(2);
          break
      }
      //侦听新增元素的变动
      if (inserted) { ob.observeArray(inserted); }
      // notify change
      ob.dep.notify();//重点
      return result
    });
  });

4.监听数组中元素的变动

var Observer = function Observer (value) {
    if (Array.isArray(value)) {
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  };
  //侦听每一项
  Observer.prototype.observeArray = function observeArray (items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  };

5.因为Array的变动侦测是通过拦挡原型的形式实现的，对于this.lsit[0]=2或this.list.length=0;是无奈拦挡侦测的。

总结：

• Array和Object都是在getter触发收集依赖的
• Object通过Observer(创立实例)递归所有数据的侦测，当从外界读取数据，在watcher读取数据，触发getter，将依赖(watcher)收集到Dep中，当数据发生变化时，会触发setter，从而向Dep中的watcher依赖发送告诉，watcher接管到告诉之后，告诉外界视图或者回调函数
• Array通过Observer(创立实例)递归所有数据并创立拦截器笼罩原型的形式进行侦测，在Obserer办法中给value(侦测得数组)新增一个不可枚举的__ob__属性，并且该属性的值就是Observer实例；在getter中将依赖收集在Observer实例中的Dep去，当数据发生变化时，通过this.__ob__.dep拜访Observer实例的dep去向依赖发送告诉。