1. 前言

1. 源码讲解,有助于提升自己的综合实力

---

2. 来个图示

1. 渲染流程.jpg

2. 初始化调用 $mount 挂载组件。
3. _render 开始构建 VNode，核心方法为 createElement，一般会创建普通的 VNode ，遇到组件就创建组件类型的 VNode，
   否则就是未知标签的 VNode，构建完成传递给 _update。

4. patch 阶段根据 VNode 创建真实节点树，核心方法为 createElm，
   4.1 首先遇到组件类型的 VNode，内部会执行 $mount，再走一遍相同的流程。
   4.2 普通节点类型则创建一个真实节点，如果它有子节点开始递归调用 createElm，使用 insert 插入子节点，直到没有子节点就填充内容节点。
   4.3 最后递归完成后，同样也是使用 insert 将整个节点树插入到页面中，再将旧的根节点移除。

---

3. vue3 组件挂载后发生 事情

1. 编译：Vue 模板被编译为了渲染函数：即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成，也可以通过使用运行时编译器即时完成。

2. 挂载：运行时渲染器调用渲染函数，遍历返回的虚拟 DOM 树，并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行，因此它会追踪其中所用到的所有响应式依赖。

3. 更新：当一个依赖发生变化后，副作用会重新运行，这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树，将它与旧树进行比较，然后将必要的更新应用到真实 DOM 上去。

4. 渲染流程

---

参考资料

vue3 渲染

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉