Vue源码探究之虚拟节点的实现(3)

updateComponent => createPatchFunction 之间的流程与另一条路径相同,只是其中基于新旧虚拟节点的判断不一样,如果存在旧虚拟节点就执行 patchVnode 操作。

patchVnode 方法是实际更新节点的实现,在这个函数的执行中,会得到最终的真实DOM

生命周期中的渲染主要是以上两条路径,调用的入口不同,但中间有一部分逻辑是公用的,再根据判断来选择分离的路程来更新 VNode 和刷新节点。在这个过程可以看出 VNode 的重要作用。

虽然路径大致可以这样总结,但其中的实现比较复杂。不仅在流程判断上非常有跳跃性,实现更新真实节点树的操作也都是复杂递归的调用。

总的来说虚拟节点的实现是非常平易近人,但是在节点渲染的过程中却被运用的十分复杂,段位不够高看了很多遍测试了很多遍才弄清楚整个执行流,这之外还有关于服务器端渲染和持久活跃组件的部分暂时都忽略了。不过关于节点渲染这一部分的实现逻辑非常值得去好好研究。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f6766c8e3d53ed9581a8fd0182821fb4.html