浅析vue3源码中的mount首次挂载

本篇文章来浅析下vue3源码中的首次挂载，学习如何在浏览器调试源码，根据一条主线找到首次挂载实现的功能。首先下载好vue3的源码，在浏览器中打开todomvc.html文件。

调试步骤

点击F12打开网页的开发者模式，呈现的页面如下图：

 在mount设置断点，点击继续执行脚本，再点击进入到下一个函数的调用，得到下图：

 此处对mount进行了封装，进行了标准化，下滑代码可以看到对mount的原始调用，我们想要找到最原始的mount，就来看这一块，如下图：

 在102行设置断点，点击继续运行脚本，点击进入下一个函数调用，得到下图：

我们来观察mount里面比较核心的内容，多次点击跳过下一个函数调用，可以看到此处构建了虚拟DOM树，可以查看DOM树里面内容，如下图：

 在render处设置断点，执行脚本后，点击进入下一个函数调用，进入render，可以得到下图：

 由于vnode树不为空，故执行else，在patch处设置断点，进入patch,可以得到下图：

 设置断点到switch，查看type，可以看到template，此处的template是被mount自动挂载上的，与前面对应，如下图：

 在switch中该对象被认为是一个组件，那么就进入到processElement中，如下图：

 在processComponent设置断点，继续执行脚本，此时n1不为空，故执行else，得到下图：

 进入mountComponent，其中setupComponent方法会进行实例的初始化，instance就是实例，在这个过程中会给instance增加响应式数据，如下图：

 通过setupRenderEffect执行首次渲染，通过componentUpdateFn进行组件更新，如下图： 

 renderComponentRoot得到虚拟DOM，再通过patch将虚拟DOM转化为真实DOM，如下图：

完整过程

 挂载做的事情，将断点设置到mount处，进入到下一个函数调用，进入之后发现，此处进行了mount的封装，进行一次标准化，找到原始调用的mount,进入到下个函数调用的位置，只执行一次，进行初始化，让用户看到第一次的结果，建立更新机制，第一步建立虚拟DOM树，render的执行，首次vnode是有值的，所以走else，进入到首次的patch操作，此处为用户传进来的根组件配置，此处的template是mount自动挂载上的，类型是对象就被认为是一个组件，进入到processComponent，进入到到processComponent，首次进入执行挂载，创建实例，通过render函数将实例转化为虚拟DOM，首次的vnode是有值的通过patch函数将虚拟DOM实例化为真实DOM，在patch里面，type为用户传来的根组件配置，在mount函数封装的时候，添加了一个template，判断类型应为组件类型进入到processComponent，在其中首先执mountComponent，instance为组件实例，通过setupComponent方法进行实例的初始化过程，增加响应式数据，通过setupRenderEffect执行首次渲染，componentUpdateFn（）进行组件更新，执行渲染函数renderComponentRoot得到虚拟DOM，通过patch将虚拟DOM转化为真实DOM。