浅析源码中patch到页面内容显示之间的过程

  本篇文章咱们一块跟随源码的足迹，浅析从patch到内容显示中间执行了哪些代码，实现了哪些功能，做了哪些事情。

执行过程

  前几篇文章中我们提到过patch，在执行patch的时候，首先传递过来的是组件，故先执行的应该为processComponent函数，然后执行其中mountComponent函数，如下图：  继续向下执行，当响应式数据发生变化之后，向下执行setupRenderEffect中的componentUpdateFn函数，如下图：

  继续向下会通过render来获取vnode，之后再调用patch获取DOM，好了，现在咱们发现要回到开头调用patch的位置，开始递归了，如果下图：

  这次patch处理的就是元素了，故需要执行processElement函数，调用其中的mountElement函数，如下图：  在mountElement中会从vnode获取要处理元素的类型，下面的代码中通过hostCreateElement创建一个新的节点，如下图：

  如果节点中只有文本，就执行hostSetElementText函数，如果存在子节点，就执行mountChildren，循环遍历所有子节点之后，继续调用patch，如下图：

  那接下来咱们继续回到patch，我们可以发现processFragment函数，学习vue2我们知道一个组件只能存在一个根标签，vue3中允许存在多个根节点，该函数是用来处理存在多个根标签的情况，如下图：

  进入processFragment中，发现通过hostInser打上了两个锚点，锚点用来确定插入的位置，同时循环所有的子节点，最后执行patchChildren，如下图：  整个调试过程可以自己去实践一下，调试方法在之前的博客中有聊到过，老话常讲眼见为实，等调试的操作和页面效果一致，自己学习到的知识就更具有信服力了。

学习收获

  想看源码实现某个效果，先去理解整个功能实现的逻辑性和合理性，常规情况和特殊情况都考虑在内，最终得到自己的知识理解。