Vue源码：new Vue发生了什么

来源

new关键字在js中代码实例化一个对象，而Vue实际上就是一个类，类在js中用function来定义，源码在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)
}
initMixin(Vue)

_init方法

new Vue之后就会调用this._init方法，同时把options传入，_init方法是在this中的，因为在初始化的时候执行了initMixin(Vue)，将Vue传入，将_init方法放在了Vue的prototype中以便调用，该方法源码在src/core/instance/init.js中。
该方法主要做了一些初始化的操作，初始化生命周期、事件中心、渲染、props、methods、data、computed、watch等，然后进行挂载。

export function initMixin (Vue: Class<Component>) {
	Vue.prototype._init = function (options?: Object) {
		//一开始做了一些初始化的操作
	    const vm: Component = this
	    // a uid
	    vm._uid = uid++
	
	    let startTag, endTag
	    /* istanbul ignore if */
	    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
	      startTag = `vue-perf-start:${vm._uid}`
	      endTag = `vue-perf-end:${vm._uid}`
	      mark(startTag)
	    }
	
	    // a flag to avoid this being observed
	    vm._isVue = true
	    // 合并options，会将传入的options传入到$option中
	    if (options && options._isComponent) {
	      // optimize internal component instantiation
	      // since dynamic options merging is pretty slow, and none of the
	      // internal component options needs special treatment.
	      initInternalComponent(vm, options)
	    } else {
	      vm.$options = mergeOptions(
	        resolveConstructorOptions(vm.constructor),
	        options || {},
	        vm
	      )
	    }
	    /* istanbul ignore else */
	    if (process.env.NODE_ENV !== 'production') {
	      initProxy(vm)
	    } else {
	      vm._renderProxy = vm
	    }
	    // expose real self
	    vm._self = vm
	    initLifecycle(vm) //初始化生命周期
	    initEvents(vm) //初始化事件中心
	    initRender(vm) //初始化渲染
	    callHook(vm, 'beforeCreate') //执行beforeCreate生命周期
	    initInjections(vm) // resolve injections before data/props
	    initState(vm) //初始化 props、methods、data、computed、watch
	    initProvide(vm) // resolve provide after data/props
	    callHook(vm, 'created') //执行created生命周期
	
	    /* istanbul ignore if */
	    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
	      vm._name = formatComponentName(vm, false)
	      mark(endTag)
	      measure(`vue ${vm._name} init`, startTag, endTag)
	    }
		//各种初始化后判断$option中是否有el，就是判断是否传入dom对象，有则进行挂载
	    if (vm.$options.el) {
	      vm.$mount(vm.$options.el)
	    }
	  }
  }

callHook()方法

在_init方法中可以看到调用了callHook(vm, ‘beforeCreate’)和callHook(vm, ‘created’) ，是指执行beforeCreate和created钩子函数，beforeCreate是在initState()之前定义的，所以在beforeCreate钩子中是访问不到initState()中初始化的数据的，例如props、data等，而created钩子是可以访问到的。代码在src/core/instance/lifecycle.js中：

//方法接收两个参数，一个是vm实例，一个是钩子名称
export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]//拿到我们定义的钩子函数
  if (handlers) {
  //遍历钩子中的函数
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm) //将vm实例传入，钩子中的this就指向了vue实例
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

initState()方法

该方法中初始化了props、methods、data、computed、watch，源码在src/core/instance/state.js中：

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

initData()方法：初始化data

该方法源码就在当前文件中，在代码中可以解决如下问题：
1、定义data的时候为什么可以写成对象的形式也可以写成方法的形式，在写成方法的形式的时候，里面的this为什么是指向Vue的。
2、为什么data中的key不可以与props和methods中的key相同，是怎么检测的。
3、data数据是怎么做代理的，以便之后双向绑定可以检测到。

function initData (vm: Component) {
  let data = vm.$options.data
  //首先判断data的类型，所以当我们定义data的时候可以写成data：{xx: ''}
  //也可以写成data(): {return {xx: ''}}
  //最终将data转化为对象赋值给data，以备后面处理，同时赋值给了vm._data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) { //判断是否是个对象
    data = {}
    process.env.NODE_ENV !== 'production' && 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
  // 拿到data中的key，用作和props和methods做对比，使其不能重复，因为他们最终都会挂载到vm上，在vue中我们都是用this对其访问
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) { //判断与methods是否重复
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) { //判断与props是否重复
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) { //data数据没有问题之后，对其进行代理
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */) //对data进行响应式处理
}

当data是个方法的时候调用getData(data, vm)，将this传入：

export function getData (data: Function, vm: Component): any {
  // #7573 disable dep collection when invoking data getters
  pushTarget()
  try {
  	//将代表Vue的this传入方法的data中，所以我们在data中的this指的就是Vue
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  } finally {
    popTarget()
  }
}

proxy(vm, _data, key)，定义了get和set方法，通过defineProperty对其进行代理，target就是我们传入的vm，sourceKey就是’_data’字符串，之前我们将data放入vm._data中，这里就可以用到，key就是data中某一个key：

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}