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