diff 概念
vue基于虛擬DOM做更新，diff的核心就是比較兩個虛擬節(jié)點的差異。
vue的diff算法是平級比較，不考慮跨級比較的情況。內部采用深度遞歸+ 雙指針的方式進行比較
diff比較流程
- 先比較是否是相同節(jié)點 key tag （標識，標簽名）
- 相同節(jié)點比較屬性，并復用老節(jié)點(將老的虛擬dom復用給新的虛擬節(jié)點dom)
- 比較兒子節(jié)點，考慮老節(jié)點和新節(jié)點兒子的情況
-
- 老的沒兒子，現(xiàn)在有兒子。直接插入新的兒子
-
- 老的有兒子，新的沒兒子。直接刪除頁面節(jié)點
-
- 老的兒子是文本，新的兒子是文本，直接更新文本節(jié)點即可
-
- 老的兒子是一個列表，新的兒子也是一個列表
updateChildren– 核心的diff算法，化為數(shù)組比對
- 老的兒子是一個列表，新的兒子也是一個列表
-
- 列表優(yōu)化比較(對于列表的情況，updateChildren)
頭頭，尾尾，尾頭，頭尾，比對查找
頭頭
先看頭指針和頭指針，若相同則頭指針同時往右移，直到上方的頭尾重合遍歷完成，把下方的D 直接拿上來
尾尾
如果頭指針和頭指針不一樣，再看尾指針和尾指針，若相同則尾指針同時往左走，知道上方的頭尾重合遍歷完成，把下方的D直接拿上來
頭尾
如果頭指針和頭指針不一樣，且尾指針和尾指針不一樣，再看頭指針和尾指針，若相同則把頭指針插到尾指針的后面，頭指針往后移，尾指針往前移，—之后再按照 頭頭，尾尾，頭尾，尾頭，直到遍歷完成
尾頭
如果頭指針和頭指針不一樣，且尾指針和尾指針不一樣，頭指針和尾指針不一樣，，再看尾指針和頭指針，若相同則把尾指針插到頭指針的前面，尾指針往前移，頭指針往后移，—之后再按照 頭頭，尾尾，頭尾，尾頭，直到遍歷完成
比對查找
如果頭頭，尾尾，頭尾，尾頭都不成立，就會通過對比查找的方式，若下面的頭指針的元素，在上面中存在，則會把上面元素的放到頭指針前面，下面頭指針往后移，上面頭指針不變，–之后再按 頭頭，尾尾，尾頭，頭尾，對比查找，直到遍歷完成
過程
文章來源：http://www.zghlxwxcb.cn/news/detail-425073.html
與vue3的區(qū)別
vue采用的 最長遞歸序列法 來實現(xiàn) diff 優(yōu)化文章來源地址http://www.zghlxwxcb.cn/news/detail-425073.html
到了這里，關于vue的diff算法原理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
