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====>渲染页面

后面会具体说下每个阶段的细节。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

你可能感兴趣的:(javascript)