1. 根据key和选择器来判断是否需要比较,如果不是都相同,那么删除旧节点,添加新节点
2. 如果都相同,则需要比较,进行patchVnode
1.如果oldVnode === node 则没有变化
2.判断是否是text节点,如果是text节点,则直接更换text值
3.判断是否都有子节点,并且子节点不相同,进行updateChildren
4.如果只有newVnode有子节点,那么插入子节点
5.如果只有oldVnode有子节点,那么删除所有子节点
上面第三步详解: 3.如果都有子节点,执行updateChildren(核心)
有四个头尾变量 oldStartIdx newStartIdx oldEndIdx newEndIndex
循环进行同级比较,
如果没有设置key
1.oldStartNode 与 newStartNode需要比较,
进行patchVnode ,startindex++
2.oldEndNode 与 newEndNode
进行patchVnode endIndex—
3.如果oldStartVnode 与 newEndVNode相同
那么oldStartVnode需要移动到oldEndVnode后面
4.如果oldEndVnode 与 newStartVnode相同
那么oldEndVnode 需要移动到oldStartVnode前面
如果有设置key
根据key查找,如果找到了就换,没有找到就插入
3.最后如果oldStartIndex > oldEndIndex 说明old先遍历完成,把newStartIndex与newEndIndex之间的所有元素当成新增的元素
如果最后newStartIndex > newEndIndex 说明new先遍历完成,把oldStartIndex与newStartIndex之间的node删除
最后再来张图
vue-diff