new vue()的时候发生了什么？

引言

本章节只是记录自己所看的一些代码，自己记录，并不做实际分析

正文引入

先来一段简单的代码：

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面的代码是使用vue创建的最简单的代码，那么上面的new Vue()做了哪些事情呢？

源码分析

根据构建过程的分析，找到代码的位置src/core/instance/index.js。

newvue.png

主要做一些初始化的工作，比如通过lifecycleMixin方法来初始化生命周期。同时看到 Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法，该方法为Vue原型上的方法，接着我们追踪至_init函数。 该方法在 src/core/instance/init.js 中定义。

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
...
    // expose real self
    vm._self = vm
    initLifecycle(vm)// 初始化生命周期
    initEvents(vm)// 初始化事件中心 
    initRender(vm) // 初始化渲染
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)// 初始化 data、props、computed、watcher 等等
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
...
 /* mount 为将数据模型vdom挂载到真实dom上 */
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等，最后初始化完成检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM；此过程我们重点关注initState以及 最后执行的mount。

总结

Vue 的初始化逻辑把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，这样的编程思想需要体会学习。