diff算法的比较规则
diff算法比较两个虚拟dom只会通层级比较,而不会跨层级比较,判断两个虚拟dom是不是同层级的标准是
- 是不是同一层
- 是否拥有相同的父级
diff 算法是采用先序深度优先的方法比较两个节点,当该节点存在子节点时,会优先比较子节点,直到子节点比较完成,才会比较下一级的节点。
判断两个节点是否是相同节点的条件是key和sel(选择器)相同,如果没有key则为undefiend。如果两个节点不相同,则执行替换操作(新增新vnode上的元素,删除旧vnode上的元素)。只有比较根节点时,才会在patch函数中进行,而子节点的比较会在updatechildren函数中进行,因为根节点只有一个,而子节点可能有多个。
如果两个节点相同,则继续往下执行。即比较两个节点的属性是否相同,节点是否存在文本,文本是否相同。是否存在子节点,子节点是否相同。第二部分只要进行
- 如果存在文本,则更新文本
- 如果存在属性,则更新属性
- 如果存在子节点,则更新子节点
第三部分主要比较两个子节点的差异
patch函数
patch是比较的开始,相当于是diff的入口,diff就是从这一步开始的。那么既然是开始,说明patch函数比较的肯定就是两个新旧vdom的根节点了。所以,两个vdom直接的比较,patch是只会触发一次的。
如果两个节点不相同,则替换旧节点。
patchVnode函数
patchVnode 是用于比较两个相同节点的子级(文本,或子节点)的一个函数。只有判断当前比较的两个vnode相同时(两个vnode相同仅仅代表key相同且sel选择器相同),才会被执行。在比对之前,会先判断下oldVnode === vNode ,因为如果全等,代表子级肯定也完全相等,那么就没必要对比了,直接return;