weixin_43359503的博客

大家好，我是 Miyue，人称“小米”（不是那个小米）~从上一篇从 CreateApp 开始学习 Vue 源码中，基本了解了与两个方法的来源和大致执行过程，这里依然以上文的流程图来进行回顾：所以在创建好应用 app 后执行mount函数，通过将我们的入口组件App.vue转换成VNode树，最后使用patch()函数将VNode树转换为真实 Dom 渲染到页面上。而 Vue 3 的 diff 算法，与 Vue 2 一样，依然在patch过程中。那么首先，先来看一下 VNode 的生成吧~

看 Vue 2 的源代码已经很久了，从用 flow 到如今使用 TypeScript，我每次都会打开它的源代码看一看，但是每次都只看到了数据初始化部分，也就是的阶段，对于如何生成 VNode（Visual Dom Node， 也可以直接称为 vdom） 以及组件更新时如何比较 VNode（diff）始终没有仔细研究，只知道采用了双端 diff 算法，至于这个双端是怎么开始怎么结束的也一直没有去看过，所以这次趁写文章的机会仔细研究一下。在我的理解中，diff 指代的是，即新旧内容之间的区别计算；