【JS】vue3源码分析一 首次渲染流程
版本是3.0.4的，直接访问这里看完整源码
先看下面的简单例子：
运行效果是这样的：
现在我们一起看看“哈哈哈”这三个字是怎么渲染出来的，先看看源码的这个位置
打印出这些内容
这里可以看出其实就是对这段代码的描述
最外层包含tag是div，里面包含一个子元素children，children里面含有一个content，存放变量text
继续往下走，看到源码这个位置
打印出这些内容
看到个字符串，是一个很像函数的字符串，是的，这个字符串是可以作为参数，通过new Function转成真正的函数。从函数体大概可以了解到里面的逻辑：_createBlock函数处理div标签，第三个参数是div里面的东西，使用_toDisplayString函数处理,里面包含变量text
看看这个函数运行后返回的结果，源码定位到这里
打印出这些内容
从运行结果可以看出已经把变量text赋值成“哈哈哈”了，后面就是patch过程，也就是对比前后两个subtree的不同从而更新dom,为什么会出现两个subtree呢?因为我们在跟页面交互时会改变状态，重新生成一个新的subtree，然后新旧subtree就可以对比了。但是我们现在只看初始化（首次渲染）的过程，没有上一个subtree，patch就放到后面讲。
从上面可以知道大概的流程：
生成ast====>生成render函数====>生成subtree====>patch====>渲染页面
后面会具体说下每个阶段的细节。
以上是 【JS】vue3源码分析一 首次渲染流程 的全部内容， 来源链接： utcz.com/a/92537.html
