Vue浅读深入响应

Vue中响应式原理，实质是给属性加上可以监测依赖变化的getter/setter，但是[object Object]和[object Array]还是不一样，下面来说说这两个响应式。

1、关于Object

1. getter方法中收集依赖，setter方法中触发依赖；
2. Dep用于收集依赖和触发依赖，每个属性都有一份；
3. Watcher就是依赖，一可以用于触发更新DOM的回调；二是用于触发自定义的回调，比如watch回调

2、关于Array

1.getter方法中收集依赖，push等7个方法中触发依赖；
2.同上
3.同上

Array复制了一份原型arrayProto，并把push pop shift unshift splice sort reverse七种方法重新设置（Object.defineProperty）在arrayProto中，当数组调用这些方法的时候,触发依赖，就相当于监测了变化，很巧妙，如同Object调用setter方法触发依赖同理。代码如下：

methodsToPatch.forEach(function (method) {
  // cache original method
  var original = arrayProto[method];
  def(arrayMethods, method, function mutator () {
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];

    var result = original.apply(this, args);
    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
  });
});