Vue源码之new Vue（二）

在一个简单的vue工程中，import Vue之后，我们会新建一个Vue实例，例如vue.js官网中的例子：

那么在new Vue的过程中到底发生了什么？

1. 首先，在vue源码中'src/instance/index.js'中可以看到，new Vue的过程主要是执行_init()函数。

这里的_init()函数来自于'./init.js'中，在这个文件中，可以看到_init函数的主要功能：

首先是对一些参数进行初始化，例如：_uid等等

然后是合并了options配置，这样就可以通过vm.$options.el等访问到创建实例时传入的option

接着，是对vue实例进行一些初始化，如生命周期，事件中心，渲染等等。

最后是判断vm实例是否存在vm.$options.el，存在的话就将vm挂载到这个dom节点上，完成渲染，经过这一步，页面上就会从：

{{message}}

变为

2.在初始化的过程中，看看initState()函数里面对vue实例进行了哪些操作，在'./state.js'中，对props, data, computed等都进行了初始化。以其中的initData()函数为例：

首先，对data进行判断，判断其是否是一个函数，在vue组件中，data应该是一个函数。同时，将data的值赋给vue实例：vm._data，用于对data做代理

然后，开始判断在props和methods中是否有相同名字的属性：

最后，代理data的值，当访问this.message时，实际上访问的是this[_data][message]

在proxy函数中，通过劫持vm实例中属性的getter和setter来实现对data的代理。

总结：

在new Vue()的过程中，主要完成了对配置的合并，对生命周期、事件中心、data、props、computed、渲染等得初始化，并通过对el的判断完成实例在DOM上的挂载。