从实例化Vue到数据双向绑定,内部到底做了啥？

1、首先打开dist/vue.js,我们首先找到Vue的构造函数

function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

这里代码不难理解，首先判断Vue是否使用new来实例化，然后调用_init，接着我们去需寻找_init是在哪里定义的

 function initMixin (Vue) {
    Vue.prototype._init = function (options) {
      var vm = this;
      vm._uid = uid$3++;
      var startTag, endTag;
      if (config.performance && mark) {
        startTag = "vue-perf-start:" + (vm._uid);
        endTag = "vue-perf-end:" + (vm._uid);
        mark(startTag);
      }
      vm._isVue = true;
      if (options && options._isComponent) {
        initInternalComponent(vm, options);
      } else {
        vm.$options = mergeOptions( // 将data、components、filters等挂在到$options属性上
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        );
      }
      /* istanbul ignore else */
      {
        initProxy(vm);
      }
      // expose real self
      vm._self = vm;
      initLifecycle(vm);
      initEvents(vm);
      initRender(vm);
      callHook(vm, 'beforeCreate');
      initInjections(vm); // resolve injections before data/props
      initState(vm);
      initProvide(vm); // resolve provide after data/props
      callHook(vm, 'created');

      /* istanbul ignore if */
      if (config.performance && mark) {
        vm._name = formatComponentName(vm, false);
        mark(endTag);
        measure(("vue " + (vm._name) + " init"), startTag, endTag);
      }

      if (vm.$options.el) {
        vm.$mount(vm.$options.el);
      }
    };
  }

那initMixin又是在哪调用的呢？

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
  ……
  initMixin(Vue);
  stateMixin(Vue);
  eventsMixin(Vue);
  lifecycleMixin(Vue);
  renderMixin(Vue);
  ……
}

发现在自执行函数的内部初始化时调用。很好，知道调用起始点后，我们再回到_init函数，里面调用了initState(vm)

  function initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    if (opts.props) { initProps(vm, opts.props); }
    if (opts.methods) { initMethods(vm, opts.methods); }
    if (opts.data) {
      initData(vm);
    } else {
      observe(vm._data = {}, true /* asRootData */);
    }
    if (opts.computed) { initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);
    }
  }

initState中initData(vm)的调用,下面就是真正的开始进行数据双向绑定的开始。首先通过data函数获取数据，并进行一些预处理

function initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm) // 执行组件的data函数
      : data || {};
    if (!isPlainObject(data)) {
      data = {};
      warn(
        'data functions should return an object:\n' +
        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
        vm
      );
    }
    // proxy data on instance
    var keys = Object.keys(data);
    var props = vm.$options.props;
    var methods = vm.$options.methods;
    var i = keys.length;
    // 判断data的key不能作为key出现在methods、props包括vue实例原型链上
    while (i--) {
      var key = keys[i];
      {
        // Object.prototype.hasOwnProperty.call(methods, key)
        if (methods && hasOwn(methods, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a data property."),
            vm
          );
        }
      }
      if (props && hasOwn(props, key)) {
        warn(
          "The data property \"" + key + "\" is already declared as a prop. " +
          "Use prop default value instead.",
          vm
        );
      } else if (!isReserved(key)) {
        proxy(vm, "_data", key);
      }
    }
    observe(data, true /* asRootData */);
  }

然后通过observe(data,true)开始对data进行观察，创建Observer

  function observe (value, asRootData) {
    if (!isObject(value) || value instanceof VNode) { // 判断value是否是对象
      return
    }
    var ob;
    // 作为props传递的数据含有'__ob__属性'而不需要重新创建Observer
    if (hasOwn(value, '') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }
  
  
  var Observer = function Observer (value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      if (hasProto) { // '__proto__' in  {}, 判断浏览器是否具有__proto__
        protoAugment(value, arrayMethods); // value.__proto__ = arrayMethods
      } else {
        copyAugment(value, arrayMethods, arrayKeys); // 向value上逐一(arrayKeys)扩展数组的方法
      }
      this.observeArray(value); // 遍历value,执行observe(value[i]),递归到叶子节点
    } else {
      this.walk(value);
    }
  };

observeArray会遍历执行observe，observe会过滤掉简单类型，所以只要data的某个属性的值为Object就会执行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]);
    }
  };

Observer.prototype.walk 遍历