利用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比较 :旧节点从最后一个和新节点从第一个开始进行比较