开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情
页面的渲染机制是我们在学习一门前端语言的时候首先需要了解的知识，也是后续进行性能优化的前提。在使用 MVVM 框架之前，开发页面主要用前端的三剑客（ Html + Css + Javascript ）来完成
运行项目，在最终展现页面之前，渲染引擎的基本渲染流程是这样的：
- 解析 Html 文件，构建 DOM 树（文档对象模型）（解析并构建 DOM 节点，其中每一个标签或文本都是一个节点）
- 解析 CSS 文件，构建 CSS 对象模型 (CSSOM)
- 关联 DOM 树和 CSSOM，一起构建渲染树（Render Tree）
- 布局 + 绘制
CSS和JavaScript往往会多次修改DOM或者，上述流程会重复执行。
那么在 使用了 Vue 框架之后，又是如何初始化视图的呢，接下来我们一起来梳理一下整个过程
Vue 页面渲染的流程
- 阶段一：
import Vue from 'vue'引入Vue 时，会对 Vue 框架进行初始化 - 阶段二：
new Vue()，创建 Vue 实例，管理生命周期（初始化 —— 模板编译 —— 挂载 —— 销毁）
在第二个阶段：
-
new Vue() 进行实例的创建(调用_init()，相当于程序的入口)
-
在 main.js 中定义,Vue2 是 new Vue()
-
Vue3 是 createApp()：
-
-
挂载组件($mount),进行实例化
-
构建 VNode （_render() 方法 、createElement() 返回 VNode ） 通过
createElement来创建虚拟节点VNode，将 VNode 渲染成 DOM。（具体的虚拟 DOM 的细节，前面有介绍过，可参考： 虚拟DOM （二）源码浅析） -
patch()对比新旧 VNode，createElm()生成（/更新）真实 DOM 节点树 （递归）。最终将整个 DOM 树插入到页面中，再移除旧的根节点（初始化渲染实际上是新的根节点代替旧的根节点） -
节点插入生命周期钩子函数
