Vue源码二次解析【理论】2------Vue初始化全过程

这次分析以在 web 应用下， Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。

Vue 的初始化逻辑非常清楚，实质上就是是往Vue的原型上去挂载一些方法，或者给 Vue 这个对象本身扩展全局的静态方法。把这些方法拆分到不同的功能模块中，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。简单来说，整个初始化的目的就是为了渲染成一个DOM

---

由于这个过程非常复杂，所以我采用总分的方法进行分析，先介绍一个整体的脉络，整个过程，再从每个过程进行具体分析。为了简化这个整体过程，所以凡是涉及只涉及主线，支线在接下来进行挨个拆解。

首先，入口文件为src/platforms/web/entry-runtime-with-compiler.js。从这个文件下手，找到Vue的原始定义instance/index.js中，它的实质是一个Function，需要通过new Vue去实例化。接着，会执行 this._init 方法，在这个方法中，会去执行生命周期函数，在这个方法的最后，会有一个对el 属性的检测，如果有，则调用 vm.$mount 方法挂载 vm，再经过render函数渲染成DOM。

一个Vue对象被渲染成DOM，过程很复杂，涉及到的源码内容众多，这里我简单先以js的形式看一个大概，对整个过程做一个了解，之后考虑做一个函数版的对应来看

---

最后，照例给出相关的源文件的github地址：

https://github.com/vuejs/vue/blob/dev/src/platforms/web/entry-runtime-with-compiler.js

https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/index.js

https://github.com/vuejs/vue/blob/dev/src/core/index.js

https://github.com/vuejs/vue/blob/dev/src/core/instance/index.js

https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js

https://github.com/vuejs/vue/blob/dev/src/core/instance/render.js