大前端【3-2】简述Vue首次渲染过程

第一步、Vue初始化，实例成员、静态成员

首先进行vue的初始化，即初始化实例成员及静态成员.

第二步、new Vue()

初始化结束以后，调用vue的构造函数new Vue()，在构造函数中调用this._init()方法

第三步、this.init()

this.init()相当于整个项目的入口，在这个方法中，最终调用vm.$mount()

第四步、vm.$mount()

这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的，核心作用是把模板编译为render函数，判断是否有render选项，如果没有，则会获取template选项，如果template也没有，会把el中的内容作为模板，通过compileToFunctions()方法将模板编译为render函数，编译好以后，将render存入到options.render中。

第五步、vm.$mount()

调用src/platforms/web/runtime/index.js文件中的$mount方法,这个方法中会重新获取el，因为如果是运行时版本的话，是不会走entry-runtime-with-compiler.js这个入口中获取el，所以如果是运行时版本的话，我们会在runtime/index.js的$mount()中重新获取el。

第六步、mountComponent(this,el)

这个方法在src/core/instance/lifecycle.js中定义的,首先判断是否有render选项，如果没有但是传入了模板，并且当前是开发环境，则发出警告（运行时版本不支持编译器），触发beforeMount钩子函数（开始挂载之前），定义updateComponents函数但是并未调用，这个函数中调用render()和update()两个方法，render是生成虚拟dom，update是将虚拟dom转化为真实dom并挂载到页面上，

创建Watcher实例对象，创建时，传递函数updateComponents，然后调用get方法，创建完毕后，触发钩子函数mounted(),挂载结束，返回vue实例。

第七步、Watcher.get()

创建完watcher，会调用一次get，在get方法中会调用updateComponent(),updateComponent会调用实例化时传入的render（）或者是编译模板以后生成的render（），返回vnode。然后调用vm._update（），调用vm.__patch__方法，将虚拟dom转化为真实dom并挂载到页面上，将生成的真实dom记录到vm.$el()中