虚拟dom通俗理解就是一个js的对象;了解到在vue中产生虚拟dom是在created和beforeMount之间生成,期间通过触发vue的render函数在其中会执行h函数在h函数中会触发vnode函数来生成虚拟dom。之后就是当数据发生变化的时候生产新的vdom,新旧vdom通过diff算法进行对比。
个人理解就是将模板中的标签也就是dom,通过vnode函数将dom转换成一个对象的形式利于后期进行diff算法的比较,这个虚拟dom类似于js对象的形式也更像是一个树的形式。在diff算法中就是通过二叉树的先序深度优先遍历为基准进行比较,在diff算法中首先会触发patch函数进行比较新旧vdom的根节点,如果根节点不同就会再次触发patchVnode函数进行比较他的子节点,如果子节点不同进行删除或者增加的操作;如果子节点相同会再次触发去比较下一级执行updateChildren,也是以一个树的形式去进行比较(具体被绕晕了),总体的步骤是patch -> patchVnode -> updateChildren -> patchVnode -> updateChildren 进行循环。
vue的数据的数据更新是通过object.defineProperty中的getter和setter进行监听到具体是哪个组件发生变化,在这个组件中再应用diff算法进行数据数据更新,所以vue是通过数据劫持+diff算法进行的数据更新。
本文详细介绍了Vue中虚拟DOM的生成过程及其如何利用diff算法进行高效的DOM更新。从vnode函数生成虚拟DOM到diff算法的具体实现,再到数据变化时的虚拟DOM更新流程,深入剖析Vue的数据劫持及更新机制。
71

被折叠的 条评论
为什么被折叠?



