简述 Vue 首次渲染的过程

话不多说，先上图：

1. 初始化Vue，挂载一些静态属性、实例成员混入一些实例或者方法。

2. 初始化结束，调用构造函数，其中this._init方法作为vue 的入口函数

3. _init中调用了 $mount，有2个$mount
   第一个 是entry-runtime-with-compiler.js 中的，作用就是把模板编译成render函数，所以这里看我们传递render 函数没有，没传，就看有没有template，如果template 也没有的话，那就把el中的内容作为模板，如果有那就通过compileToFunctions()把模板转译成render函数，然后把结果放到 options.render 中

   第二个 在runtime/index.js 中。会重新获取el，需要判断是否是运行时版本，运行时版本才执行mountComponent()

4. mountComponent()在 instance\ lifecycle 中定义的

   • 先判断是否有render 选项，如果没有但是传入了模板，并且在开发环境，就会发送警告，这里主要是运行时版本不支持编译器
   • 接下来触发 beforeMount
   • 定义 updateComponent，这里面主要有2个方法：_render：渲染虚拟Dom，_update 把虚拟dom 转换成真实 Dom
   • 创建了WATCHER 对象，然后调用了里面的get 方法，上面的 updateComponent就是在这里传入调用的
   • 这里updateComponent中的的_render 方法就是，用户传入的 render ，或是 编译模板生成的render，当然他们最后都是返回 vnode
   • 而 updateComponent 中的 update 方法就是，调用了_patch 方法，把虚拟dom 转换为真实dom ，并且挂载到页面上，把生成的真实DOM 挂载到 $el 中
   • 当 wacther 创建完后就会触发 mounted 方法，最后在返回 Vue 实例