快捷地创建vnode对象
将虚拟dom挂载到页面中
精细比较虚拟节点的内部
精细比较新旧虚拟节点的子节点,diff中最核心的一个函数。
1、在比较两个新旧节点时updateChild函数采用先平行比较
、再交叉比较
的方式进行更新。
平行比较
:
-
旧 vnode 头 vs 新 vnode 头
新子节点数组的第一项 与 旧子节点数组的第一项 进行比较,新子节点数组的第二项 与 旧子节点数组的第二项 进行比较...依此类推
-
旧 vnode 尾 vs 新 vnode 尾
新子节点数组的最后一项 与 旧子节点数组的最后一项 进行比较,新子节点数组的倒数第二项 与 旧子节点数组的倒数第二项 进行比较...依此类推
交叉比较
:
-
新 vnode 尾 vs 旧 vnode 头
新子节点数组的最后一项 与 旧子节点数组的第一项 进行比较,新子节点数组的倒数第一项 与 旧子节点数组的第二项 进行比较...依此类推
-
新 vnode 头 vs 旧 vnode 尾
新子节点数组的第一项 与 旧子节点数组的最后一项 进行比较,新子节点数组的第二项 与 旧子节点数组的倒数第一项 进行比较...依此类推
上面这4种比较方式只要命中其中一项,就不再往后查找,即它们是if else if关系
如果上面4种比较都没命中,则再取得旧子节点结束与开始之间的节点,然后循环新子节点,看是否能查找的到,如果查找的到则说明新节点移动位置了,此时我们需要使用dom api移动元素位置。如果查找不到,则说明是新增的节点。
2、如果上面5种情况都执行完毕了,还有剩余节点,则分两种情况:
a. 新子节点中还有剩余未处理的节点:将这些节点添加到dom中
b. 旧子节点中还有剩余未处理的节点:从dom中移除这些节点