patchVnode 主要对比以下几个方面
1.对比新旧vnode的属性,在这过程中会更新属性,调用指令等 见下图
2.对比子元素
对比子元素主要对比以下几个方面
新vnode 的 text存在,并且老vnode的text存在,判断是否相同,不相同直接调用nodeOps.setTextContent(elm, vnode.text)
新的vnode的text不存在分以下几种情况对比
新vnode 的child 和 老vnode的child 都存在 直接调用updateChildren
新的vnode的child存在 老的vnodechild不存在 新把老的vnode text置为空,在添加
新的子元素 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
新的vnode的child不存在 老的vnodechild存在 ,直接删除老的vnodechild removeVnodes(oldCh, 0, oldCh.length - 1)
新的vnode的child不存在 老的vnodechild不存在,老的vnodechild的text存在,直 接把老的vnode的text置空