new Vue() 发生了什么

Posted 2021-09-04 超帅的轻省回望

先看看源码：

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

Vue.prototype._init = function (options) {
    var vm = this;
    ...
    vm.$options = mergeOptions(options || {}, vm);
    ...
    initState(vm);
    ...
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
    ...
  };
}

由此，不难看出做了以下步骤：
1.合并配置：

new Vue({
  store: store,
  router: router,
  render: h => h(App),
}).$mount(\'#app\')
//故，合并（路由、状态管理、 渲染函数）

2.初始化生命周期

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就是将vue实例中的data,method,computed,watch等数据项做进一步得处理，其实就是做代理以及转化成可观测对象。

3.数据处理完成之后就将数据挂载到指定的钩子上：vm.$mount(vm.$options.el);

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\');

可以看到在initState(vm)执行之前，我们执行了beforeCreate方法，在initState(vm)执行之后，我们执行了created方法。因此在beforeCreate方法中，我们无法直接引用data，method，computed，watch等在initState(vm)中才开始存在的属性。