-
data变化触发def.notify。
-
notify会调用patch(vnode, oldVNode)。通过isSameVNode判断,如果不是直接用新的VNode替换老的oldVNode。如果是需要调用patchNode进行处理
-
需要做如下判断:
-
如果vnode === oldVnode 直接返回。
-
如果vnode与oldVnode都有text内容,并且文字内容不同,更新dom元素的text内容。
-
如果都有子节点,调用updateChildren处理。如果oldVnode没有向元素内添加子节点。如果vnode没有子元素,删除dom中的子元素。
-
updateChildren处理,会给vnode的子节点创建开始、结束指针,给oldVnode的子节点创建开始、结束指针。循环遍历,跳出条件是vnode和oldVnode的开始结束指针都必须开始指针<= 结束指针。
-
判断除掉oldVnode的null的子节点。
-
判断新老开始是否相同,是,patchVnode,新老开始指针++。
-
判断新老结束是否相同,是,patchVnode,新老结束指针++。
-
判断老开始&新结束是否相同,是,patchVnode,将Dom节点插入到oldVnode结束指针的后边。
-
判断新开始&老结束是否相同,是,patchVnode,将Dom节点插入到oldVnode开始指针的前边。
-
如果都没有匹配上通过key的hash在oldVnode的子节点中查找。找到了,patchVnode,移动到oldVnode的开始指针前边,没找到插入到oldVnode的开始指针前边。
-
循环执行完成之后判断是vnode执行结束还是oldVnode执行结束。如果vnode子节点执行结束,将oldVnode中剩余的删除。如果oldVnode子节点执行结束,将vnode子节点中没有添加的加入到对应的位置。