vue心得之 原始碼解析v for為什麼要加key

2021-10-04 20:46:12 字數 679 閱讀 2514

為了標識該節點是該節點,優化patch演算法,在某些情況下可以減少dom操作

具體使用場景即作用參考下原始碼(vue2)

由以上**可以理解網上的這兩張圖了

對arrdata= [a, b, c, d, e]

更新成arrdata= [a, b, f, c, d, e]

在 v-for迴圈遍歷後新增了key能標識原本的a, b, c, d, e,這樣在更新陣列後,vue做patch演算法時能夠通過key屬性精確的知道原本的c,d,e節點,和新的c,d,e節點進行對比,而此時新的c,d,e並沒變化,和舊節點對比後不會出發真實的dom操作

沒有key屬性,vue做patch演算法時可能不能準確找到原本的c,d,e節點,分別和新的f,c,d進行對比,此時資料不一致大概率會引起真實dom操作

(一) Mybatis 原始碼解析之原始碼概述

原始碼結構圖 基礎支撐層 技術元件專注於底層技術實現,通用性較強無業務含義 核心處理層 業務元件專注 mybatis 的業務流程實現,依賴於基礎支撐層 介面層 mybatis 對外提供的訪問介面,面向 sqlsession 程式設計 原始碼腦圖結構 原始碼結構圖 建議和腦圖一起看,了解每個包存在的意...

Selenium之原始碼解析切換frame的四種方式

原始碼 def frame self,frame reference frame reference可以是id,name,index,element來切換frame switches focus to the specified frame,by index,name,or webelement.a...

Vue原始碼解析

原始碼位置 src core vdom patch.js updatechildren 作用 key的主要作用是高效的更新虛擬dom,原始碼中在patch的過程中,會執行patchvnode,patchvode過程中會執行updatechildren方法,會更新兩個新舊的子元素,通過key可以準確的...