vue虚拟 dom 简单理解


利用patch(diff算法)对比新旧虚拟DOM记录到一个对象中按需更新,最后创建真实的DOM。

              虚拟dom原理流程:模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM;

              虚拟DOM 的实现原理主要包括以下 3 部分:

              1、用JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;

              2、diff算法—比较两棵虚拟 DOM 树的差异;

              3、pach算法—将两个虚拟DOM 对象的差异应用到真正的 DOM 树。


 注:Diff是一种算法,类似排序算法当数据变化之后,如果直接操作 DOM,浏览器会重新渲染页面,消耗性能比较大,使用 Diff 算法,它不直接操作 DOM,而用 js 对象来描述真实 DOM,比较 js 对象是否发生变化,找到变化的位置,最小化的更新变化的位置,提高了性能,

              它的执行过程是:在比较开始时首先对新老节点数组的开始和结尾节点设置标记索引,遍历比较时会出现四种情况:

              a.oldStartVnode/newStartVnode比较: 旧节点和新节点从第一个开始进行比较

              b.oldEndVnode/newEndVnode比较 : 旧节点和新节点从最后一个开始进行比较

              c.oldStartVnode/newEndVnode比较 : 旧节点从第一个和新节点从最后一个开始进行比较

              d.oldEndVnode/newStartVnode比较 :旧节点从最后一个和新节点从第一个开始进行比较

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容