Vue源码阅读笔记(一)new Vue 实例

一.new Vue 发生了什么？

很简单：初始化传入的options,生成一个vue实例

function Vue (options) {

  this._init(options)

}

 

二._init做了什么？

Vue.prototype._init = function (options) {
  var vm = this;
  // a uid
  vm._uid = uid$3++;
  vm._isVue = true;
  // merge options
  vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      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');
  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
};

主要思路：1.merge  options  2.初始化生命周期，数据，方法等等。看代码可以更好理解生命周期图；3.初始化数据：initState。

4.最后执行$mount,实例挂载。

三.数据初始化initState做了什么？

初始化props,methods,data。 接下来看initData:

数据初始化，做了数据代理,proxy。然后对数据新建obseve。那么proxy做了什么？主要是Object.defineProerty

ergmechusg e optionsge options