Vue.js源码解析——new Vue()做了什么事情

Vue.js中我们可以用以下的语法来声明式渲染数据

<div id="app">
	{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			message:"Hellp Vue!"
		}
	})
</script>

在页面上能看到Hellp 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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

首先判断当前的环境是不是生产环境，且在调用Vue的时候，有没有用new操作符，如果没有就会调用warn，抛出一个警告告诉我们Vue是一个构造函数，需要用new操作符去调用
接着调用_init方法，传递的参数便是我们在new Vue时传进去的对象

{
	el:"#app",
	data:{
		message:"Hellp Vue!"
	}
}

_init方法是 initMixin 封装到vue函数原型中的，此方法在src/core/instance/init.js

let uid = 0//每个Vue实例都有一个id

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
    // merge options
    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 */
    //为Vue实例的_renderProxy属性赋值
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    
    //初始化生命周期
    initLifecycle(vm)
    
    //初始化事件相关属性，当有父组件的方法绑定在子组件时候，供子组件调用
    initEvents(vm)
    
    //初始化渲染
    initRender(vm)
    
    //调用beforeCreate钩子函数
    callHook(vm, 'beforeCreate')
    
    initInjections(vm) // resolve injections before data/props
    
    //对props、methods、data、computed、watch等属性进行初始化
    initState(vm)
    
    initProvide(vm) // resolve provide after data/props
    
    //调用created钩子函数
    callHook(vm, '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)
    }

    if (vm.$options.el) {
    //转换成render函数
      vm.$mount(vm.$options.el)
    }
  }
}

主要的几个方法的作用在上面注释了
来看看initState这个方法，位于在src/core.instance/state.js，它的作用是初始化在构造函数中用户定义的属性值，包括data、methods、props、computed、watch等

export function initState (vm: Component) {
  vm._watchers = []
  const 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)
  }
}

再看下对data的初始化，initData方法

function initData (vm: Component) {
  let data = vm.$options.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
  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)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      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)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

该方法先从vm.$options.data获取data对象，根据是否是function类型进行处理，接下来代理到vm对象上，即对所有data下的属性设置代理，然后使用Object.defineProperty 把这些属性全部转为 getter/setter，同时每一个实例对象都有一个watcher实例对象，他会在模板编译的过程中用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，最重要的是，调用observe建立Observer和劫持钩子函数，后续数据的变化都会触发其watcher对象，实现数据的绑定，这样就建立了视图与数据之间的联系

在初始化完成后如果检测到有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM

总的的来说，Vue的实例化过程主要有以下几步
new Vue() ⇒ 执行_init 方法 ⇒ 进行一系列初始化（初始化生命周期，属性等） ⇒ 调用$mount方法进行挂载，渲染为最终的DOM节点
上面大概描述了一下new Vue()发生的事情，更详细的可以去看源码里面每一个方法的具体实现