2.3 运行概述

首次渲染

火焰图

record1

从图中可以看出第一次渲染主要分为两步

1. 创建app对象

2. 手动调用对象的mount方法

mount函数是第一次渲染的调用的函数，从图中可以看到mount函数会调用render函数，render函数的核心是patch函数。

这里先给出结论，vue的渲染实际上是递归调用patch函数进行深度优先遍历直到完成渲染。

非首次渲染

图1左边部分位于图2的红色框区域

从图中可以看到非首次渲染也分为两部分

1. 触发更新

2. 执行更新

执行更新的函数调用时处于一个微任务调用栈里面（图2的run MircoTasks）。

之后调用的核心函数是componentUpdateFn，这个函数在之后也会调用patch方法去递归遍历进行渲染

总结

vue3的渲染无论是首次还是非首次核心都是递归调用patch算法进行深度优先遍历进行渲染