浅析new Vue()时发生了什么

　　在项目中我们引入了 Vue：import Vue from 'vue'。那么问题是vue到底从哪里来的？从node_modules中来。在node_modules路径下存在vue文件夹，vue文件夹中存在一个package.json文件。在这个文件中存在两个配置字段，它们都是程序的主入口文件。

"main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",

　　其中module的优先级大于main的优先级。在module不存在时，main对应的配置项就是主入口文件。可以看到 dist/vue.runtime.esm.js 才是主入口文件。

　　为了方便，我们可以去GitHub上下载vue的源代码到本地查看 https://github.com/vuejs/vue，下载完成后，我们在编辑器打开，它的目录结构如下：

　　其中 Vue.js 的源码都在 src 目录下，源码的目录结构如下：

src 
├── compiler              # 编译相关 
├── core                  # 核⼼代码 
├── platforms             # 不同平台的⽀持 
├── server                # 服务端渲染 
├── sfc                   # .vue ⽂件解析 
├── shared                # 共享代码

一、new Vue 过程解析

1、Vue 构造函数

　　当 new Vue(options) 时调用的是 src/core/instance/index.js 文件中的Vue函数，源码如下：

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
function Vue (options) { //vue 函数
  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实例时候，会判断如果当前的环境不是生产环境，并且如果在调用Vue的时候，没有用new操作符，就会调用warn函数，抛出一个警告，告诉你Vue是一个构造函数，需要用new操作符去调用。这个warn函数并不是单纯的console.warn。

　　接下来，把 options 作为参数调用 _init 方法。options 就是调用 new Vue时候传入的参数。可以看到Vue构造函数的核心代码只有一行：this._init(options)

　　在Vue构造函数后边，还有几句代码：

function Vue (options) {
  ...
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

　　在Vue的构造函数定义之后，有一系列方法会被立即调用。这些方法主要用来给Vue函数添加一些原型属性和方法的。然后我们去看一下在构造函数中调用的 _init()

2、Vue.prototype._init

　　上边我们可以看到 Vue 只能通过 new 关键字初始化，然后会调⽤this._init⽅法， 该方法在 src/core/instance/init.js 中定义。

export function initMixin (Vue: Class<Component>) {
    Vue.prototype._init = function (options?: Object) {
       // 首先缓存当前的上下文到 vm变量中，方便之后调用
       const vm: Component = this
       // 然后设置_uid属性。_uid属性是唯一的
       // 当触发init方法，新建Vue实例时（当渲染组件时也会触发）uid都会递增
       vm._uid = uid++
       let startTag, endTag
       
       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
       // 有子组件时，options._isComponent才会为true
       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.
         // 优化组件实例，因为动态选项合并很慢，并且也没有组件的选项需要特殊对待
         // 优化components属性
         initInternalComponent(vm, options)
       } else {
         // 传入的options和vue自身的options进行合并
         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) // 添加slot属性
       callHook(vm, 'beforeCreate') // 调用beforeCreate钩子
       initState(vm) // 初始化数据，进行双向绑定 state/props
       initProvide(vm) // resolve provide after data/props 注入provider的值到子组件中
       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)
       }
       if (vm.$options.el) {
         vm.$mount(vm.$options.el) // 把模板转换成render函数
       }
     }
}

　　可以看到 _init 方法中主要做了下边几件事情：

（1）合并配置：_init 的参数 options 就是 new Vue(options) 时传入的选项，在这里通过 mergeOptions 方法把 options 合并到 vm.$options 中。合并配置项，比如路由，状态管理，渲染函数

new Vue({
  store: store,
  router: router,
  render: h => h(App),
}).$mount('#app')

 

（2）调用 initLifecycle(vm)、initEvents(vm)、initRender(vm)、initState(vm) 函数进行生命周期的初始化、事件中心的初始化、渲染的初始化、data、props、computed、watch的初始化等等。

　　其中 initState 就是将vue实例中的data、props、computed、watch等数据项做进一步得处理，其实就是做代理以及转化成可观测对象。

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

（4）检测是否有el属性，有的话就调用 vm.$mount(vm.$options.el) 进行挂载渲染成真实dom。

3、initState方法如下：

　　从源码可以看出，initState就是将vue实例中的data,method,computed,watch等数据项做进一步得处理，其实就是做代理以及转化成可观测对象。

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

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

二、小结

1、vue只能通过new关键字初始化，new Vue() 时做了什么呢？

2、合并传入的options

3、初始化生命周期

4、初始化事件中心

5、初始化渲染

6、执行 beforeCreate 钩子

7、初始化data

8、初始化props

9、初始化computed

10、初始化watch

11、执行 created 钩子

12、最后检测是否有el属性，有的话就把上面渲染好的代码挂载到页面上

　　放一张很流行解说vue数据响应式的图儿

　　那么 new Vue() 实际上就是做的：new Vue() -- init -- $mount 间的过程