Vue 的首次渲染的过程

Vue版本：2.6.10

1. 首先进行Vue的初始化，初始化Vue的实例成员和静态成员
2. 调用构造函数中的_init()方法，作为整个Vue的入口
3. 在_init()中调用$mount()方法：
   • 第一个$mount()：在入口文件entry-runtime-with-compiler.js中。其核心作用是将模板（按照传入render>template>el的优先级作为模板）用compileToFunction()编译成render函数并存储在option.render中
   • 第二个$mount()：在runtime/index.js中。运行时版本不会走第一个mount()，所以仅会在这里中获取el
4. 调用mountComponent()，src/core/instance/lifecycle.js中定义
   1. 判断render选项，若运行时版本&没有render&传入了模板，会警告运行时版本不支持编译器
   2. 触发beforeMount()
   3. 定义updateComponent()，该方法中调用了两个方法：
      • _rende()：调用了render.call(vm._renderProxy,vm$createElement)将用户传入的render()或者自己编译生成的render()生成的虚拟DOM返回
      • _update()：调用了__patch__(vm.$el,vnode)将虚拟DOM转换成真实DOM，并且挂载到页面上；将生成的真实DOM记录到vm.$el中。
   4. 创建Watcher对象。创建时传递了updateComponent()并在内部调用get()时调用了updateComponent()
   5. 触发mounted()
   6. return vm