new Vue({})初始化流程

new Vue的初始化流程

new Vue({})之后发生了什么？

首先来看Vue的构造函数，

一、src/core/instance/index.js

源码：

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)
}

可以看到这里会进入到_init()这个方法中。即Vue.prototype._init，所在文件为src/core/instance/init.js

二、src/core/instance/init.js

可以在这个文件中看到，_init()方法定义了很多的初始化方法， _init()源码：

export function initMixin(Vue: Class<Component>) {
   
  Vue.prototype._init = function (options?: Object) {
   
    const vm: Component = this
    // a uid
    vm._uid = uid++

    ....中间代码忽略，从45行看起
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
   
      initProxy(vm)    
    } else {
   
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)    //声明$parent,$root,$parent,$refs
    initEvents(vm)       //对父组件传入的事件添加监听，事件是谁创建谁监听，子组件创建事件子组件监听
    initRender(vm)       //声明$slots和$createElement()
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props   获取注入数据