简述 Vue 首次渲染的过程

[janeLLLL]

1. Vue初始化，初始化实例成员和静态成员

2. 进行new Vue()

3. 在初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于整个Vue的入口函数

4. 在_init()中调用this.mount()，一共有两个

• 第一个this.$mount()把模板编译成render()函数，它是entry-runtime-with-compiler.js入口文件：

  • 首先判断当前是否传入了render选项，如果没有传递render，把模板编译成render函数；

  • 通过complieToFunction()函数生成render()渲染函数

  • 当把render函数编译好后，它会把render函数存在我们的options.render中

    options.render = render

• 第二个this.$mount()是runtime\index.js中方法，它会重新获取el，因为如果是运行版本，是不会走entry-runtime-with-compiler.js这个入口重新获取el：如果是运行版本，我们会在runtime\index.js的$mount()中重新获取el

5. 接着**调用mountComponent(this,el)**进行vue生命周期相关变量初始化，它在src\core\instance\lifecycle.js中定义的。

   在mountComponent()中，首先判断render选项，如果没有，但传入了模板，并且当前是否是开发环境的话会发出警告，警告运行时版本不支持编译器，接下来会**触发beforeMount**这个生命周期中的钩子函数，也就是开始挂载之前。

• 然后定义updateComponent()，在这个方法中，定义了_render和_update
  • _render的作用是生成虚拟DOM（渲染虚拟DOM）
  • _update的作用是将虚拟DOM转换成真实DOM，并且挂载到页面上（更新）

6. 创建Watcher实例。在创建Watcher时，传递了updateComponent这个函数，这个函数最终是在Watcher内部调用的。在Watcher创建完之后还调用了get()方法，在get方法中，会调用updateComponent()

7. 触发生命周期的钩子函数mounted，挂载结束，最终返回Vue实例