Vue的diff演算法是如何操作運用的？本文教你

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/09/13070834.html
-Advertisement-
Play Games

前言 本文旨在理一下vue中diff演算法的主要邏輯和關鍵細節。 從一個簡單的demo切入： p標簽渲染一個items數組 <div id="demo"> <p v-for="item in items" :key="item">{{ item }}</p> </div> <script src=". ...


前言

本文旨在理一下vue中diff演算法的主要邏輯和關鍵細節。

從一個簡單的demo切入： p標簽渲染一個items數組

<div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
</div>
<script src="../vue-source/dist/vue.js"></script>
<script>
    const app = new Vue({
      el: "#demo",
      data: {
        items: ["a", "b", "c", "d", "e"]
      },
      mounted() {
        setTimeout(() => {
          this.items.splice(2, 0, "f")
        }, 2000)
      }
    })
</script>
複製代碼

先把實際順序說明：

  1. items數據發生變化 Dep.notify
  2. patch(oldVNode, vnode, ...)
  3. patchVnode(oldVnode, vnode, insertedVnodeQueue, ...) ps: diff從這裡就開始了 insertedVnodeQueue是patch函數中定義的常量，在後期的diff裡面一直維護著，典型的閉包結構。
  4. updateChildren() diff的核心方法
    5.學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

sameVnode

sameVnode函數貫穿著整個diff過程，其中首要的必要條件就是key要相等

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}
複製代碼

key

眾所周知，key在patch中發揮著至關重要的作用，key可以在很多情況下能夠有效地減少不必要的重新渲染。 當不設置key時，那麼渲染列表數據中的子元素key就是undefined, 顯然undefined === undefined。那麼sameVNode永遠都是相同的(通常情況下)，同時造成不必要的渲染（如果是開頭的demo中不設置key的話將會多造成3次的不必要渲染）。

如果設置了key，a.key !== b.key的情況下就馬上終止了判斷，sameVnode直接返回false，不跟你多bb。
避免用數組的下標作為key
因為當數組發生變化時，下標也可能會發生變化，這可能導致一些隱蔽的bug。

patch

  • 不存在 oldVnode,則進行createElm
  • 存在 oldVnode 和 vnode，但是 sameVnode 返回 false, 則進行createElm
  • 存在 oldVnode 和 vnode，但是 sameVnode 返回 true, 則進行patchVnode

patchVnode

可以將Vnode分為3種：

  • 純文本Vnode
  • 含Children的Vnode
  • 不含Children的Vnode

所以情況可以分成3*3種

 oldVnode.textoldCh!oldCh
vnode.text setTextContent setTextContent setTextContent
ch addVnodes updateChildren addVnodes
!ch setTextContent removeVnodes setTextContent 
function patchVnode (oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
  // 節點相同則直接返回，不作處理
  if (oldVnode === vnode) {
      return
  }
  // ...
  const elm = vnode.elm = oldVnode.elm
  // ...
  const oldCh = oldVnode.children
  const ch = vnode.children
  // ...
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
    // 當新老Vnode.length都存在且不相等 進入updateChildren
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
  }
  // ...
}
複製代碼

updateChildren

insertedVnodeQueue 是維護的一個數組隊列，diff完成後將隊列中的數據逐個更新

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 雙指針
    let oldStartIdx = 0
    let newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm
    // 首首 => 尾尾 => 首尾 => 尾首 => 遍歷old用key查找index替換位置
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    // 跳出while迴圈 也就是前後指針交錯了
    // 如果是老節點的指針先交錯那就說明是新增了節點 => addVnodes
    // 反之 => removeVnodes
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
複製代碼

測試

回到例子，為了能走更多的情況，改一下demo。

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
  </div>
  <div>
    ["a", "b", "c", "d", "e", "f", "g"] => ["f", "d", "a", "h", "e", "c", "b", "g"]
  </div>
  <script src="../vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#demo",
      data: {
        items: ["a", "b", "c", "d", "e", "f", "g"]
      },
      mounted() {
        setTimeout(() => {
          this.items = ["f", "d", "a", "h", "e", "c", "b", "g"]
        }, 2000)
      }
    })
  </script>
</body>
複製代碼

在vue.js中的updateChildren打下斷點以便觀察。

 

 

第一次while

尾尾gg匹配成功

 

newStartVnode都是g, 進入patchVnode。 我原本以為會判斷if (oldVnode.text !== vnode.text)然後不作處理，結果竟然又進去了updateChildren。
不禁讓我console.log("oldStartIdx", oldStartIdx, oldCh[oldStartIdx])

 

誤區

其中結構為

 

我原本以為這個 VNode.text = a; VNode.children = undefined ...
這個<p>a</p>中的a還是一個VNode...

 

 

好在糾正了錯誤，下麵就不管那個純text的VNode了。

 

不會只有我現在才知道吧...

那麼在debugger加個條件以便觀察 oldStartVnode.tag === 'p'

 

 

繼續

 

 

第二次while

尾首匹配成功，參考節點為a節點執行nodeOps.insertBefore

abcdefg => fabcdeg

oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx];

 

第三次while

首尾四次匹配都沒有匹配到，進入該代碼塊。

  1. 對剩下的oldVnode進行createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)(值見下圖)
  2. 如果idxInOld不存在，則表明是new element => createElm
  3. 如果idxInOld存在 => oldCh[idxInOld] = undefined => 參考節點為a節點執行nodeOps.insertBefore
  4. 此時界面上也從 fabcdeg => fdabceg

 

 

 

 

第四次while

首首aa對比成功

 

 

第五次while

首尾bb對比成功，參考節點為g節點執行nodeOps.insertBefore

fdabceg => fdacebg

 

 

第六次while

首尾cc對比成功，參考節點為b節點執行nodeOps.insertBefore

fdacebg => fdaecbg

 

 

第七次while

此時的oldStartVnode === undefined => oldStartVnode = oldCh[++oldStartIdx];

 

 

第八次while

尾尾ee匹配成功

 

 

此時oldEndIdx < oldStartIdx 跳出while，進入下麵代碼塊。

oldEndIdx < oldStartIdx => 新增了節點 => 參考節點為E節點執行addVnodes()(addVnodes執行最終也是nodeOps.insertBefore)，將newCh剩餘的節點（H）依次插入E(下麵的refElm)節點之前。

 

 

再在debugger中按一次F8就完成了整個diff過程了，現在呈現的就是最終的fdahecbg

參考鏈接

總結

強烈建議用Chrome瀏覽器進行調試，配合圖簡直不要太好理解

  1. 渲染列表的diff關鍵函數updateChildren
  2. 註意VNode結構 => <p>a<p> => VNode{tag: 'p', children: VNode{tag: undefined, children: undefined, text: 'a'}, text: undefined}
  3. 每一次迴圈: 首首 => 尾尾 => 首尾 => 尾首 => findIndex => createElm(!idxInOld) | nodeOps.insertBefore(idxInOld)
  4. 跳出迴圈 => addVnodes(oldStartIdx > oldEndIdx) | removeVnodes(newStartIdx > newEndIdx)

最後
註意：學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 轉行WEB前端 感覺很迷茫 該怎麼做？
    有很多同學留言說，越學越迷茫，不知道該從哪裡下手，今天梳理了一些學習web前端的經驗，以及學習的步驟，分享給大家，希望對你們學習能有幫助。 ...
  • 摸魚日記之—— js 中的遍歷器：Iterator 與 for of
    1.什麼是Iterator ? 遍歷器（Iterator）它是一種介面，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 介面，就可以完成遍歷操作。 Iterator 的作用有三個： 1.是為各種數據結構，提供一個統一的、簡便的訪問介面； 2.是使得數據結構的成員能夠按 ...
  • Vue項目如何部署？實戰教你
    前言 使用vue、react、angular等技術開發過程中，我們都會遇到以下問題： 首屏載入慢 每一次更新都需要清除瀏覽器緩存才能看到效果(經常被測試吐槽) 這兩個問題可以從很多方面進行優化，今天我就從前端頁面部署階段來優化一下這兩個問題。PS：以下內容都基於vue-cli3+。 3.光理論是不夠 ...
  • Vue3 到底哪裡好？和React Hook對比有啥有優勢？本文詳解
    前言 這幾天 Vue 3.0 Beta 版本發佈了，本以為是皆大歡喜的一件事情，但是論壇里還是看到了很多反對的聲音。主流的反對論點大概有如下幾點： 義大利面代碼結構吐槽： “太失望了。雜七雜八一堆丟在 setup 里，我還不如直接用 react” 我的天，3.0 這麼搞的話，代碼結構不清晰，語義不明 ...
  • 拿2k的前端開發都會做些什麼？
    坐標珠海，前端程式媛一枚 實習時候做的是測試，2.5k+600餐補； 後來覺得對前端更有興趣所以重新找工作，但是苦於沒有經驗，畢業第一年在一個傳統行業的公司找到了一個前端崗位，薪酬4k，公司主要是接政府項目，伺候甲方爸爸。 前端崗位歸在產品組，實際做的是產品經理+UI+交互+代碼 產品組長/真 · ...
  • 畢業生想學習web前端開發，有什麼好的發展方向嗎？
    先說一下現在公司企業招聘前端開發人員需要掌握哪些技術要求 目前企業招聘前端工程師的基本需求： 1.精通DIV+CSS網頁框架佈局的HTML代碼編寫，熟悉W3C標準； 2、使用HTML5/CSS3熟練地進行頁面開發； 3.具備良好的前端架構分析能力與設計能力，與開發團隊保持良好溝通； 4.精通各主流瀏 ...
  • Vue中Axios如何封裝管理？本文詳解
    Vue Axios 封裝 定義 Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 特性 支持Promise API 攔截請求和響應 轉換請求數據和響應數據 自動轉換JSON數據 客戶端支持 XRSF 回歸正題 在Vue 項目開發中，我們與介面打交道最多 ...
  • Google VS 百度
    訪問谷歌頁面，商店應用等 1.下載鏈接：https://pan.baidu.com/s/1yt0PGLpQkQIE5FYXA4v7yA提取碼：kqp2 2.安裝將 crx 尾碼改成 rar 尾碼,然後解壓 3.添加擴展程式 4.完成安裝 提示需要激活，否則只有12小時免費 5、點擊永久免費激活 要想 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類