VueDiff解析

    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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 何謂人 出生為人 死去為人 如一輪蒼月 寂寞的懸掛在天間 如何能被了解 這一切該如何是好 享 是非 如何歸去 ...
    饅頭愛吃菜包閱讀 332評論 0 1
  • 想多了解一點你的我,偷偷的看了一下你以前的動態,和寫的隨筆!沒有經過感情經歷的我看到你那刻苦銘心的曾經。心里不免還...
    墨逸塵緣閱讀 360評論 0 0
  • 周末,朋友相約一起聊聊接下來要怎么辦; 從公司決定關掉研發中心到現在差不多2個月了,能夠找到工作的陸陸續續都找到了...
    小Dew閱讀 327評論 0 1