共计 646 个字符，预计需要花费 2 分钟才能阅读完成。
版本是 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 公布