淺談Vue3中key的作用和工作原理
這個key屬性有什么作用呢？我們先來看一下官方的解釋：
- kekey屬性主要用在Vue的虛擬DOM diff算法中，在新舊nodes對比時辨識Vnodes；
- 如果不使用key，Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法
- 而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除/銷毀 key 不存在的元素。
先簡單提一下我對VNode的理解：
- VNode的全稱是Virtual Node，也就是虛擬節(jié)點；
- Vnode的本質(zhì)是一個JavaScript的對象；
- 實際上在Vue中，無論是組件還是單個元素，都表示成了一個個VNode。
舉個例子：
<div class="title" style="color: red;">Helllo World</div>
// 實際上在Vue中會表示為：
const VNode = {
type: "div",
props: {
class: "title",
style: {
color: "red"
}
},
children: "Hello World" // 假如div里面還包含著其他標(biāo)簽，那么會以同樣的方式轉(zhuǎn)成在children里面
}
在什么情況下，插入f效率是最高的呢？
思路：
- 重新渲染一次（消耗大量性能）
- 前面的VNode不變，從插入位置重新渲染（消耗較大性能）
- 所有的VNnode都重新渲染，只需插入新增VNode（性能最好）
結(jié)論：想要最高性能，那么必須給新舊VNodes進行key標(biāo)識，通過key值把舊的VNodes與新的VNodes進行對比，想辦法找出需要增加的或者刪除的是哪個VNode，其他的VNode盡量不變，那么新舊VNodes對比的這個過程就是diff算法。
Vue事實上會對于有key和沒有key會調(diào)用兩個不同的方法，下面我們來看看源碼：（packages\runtime-core\src\renderer）
在有key的情況，執(zhí)行 patchKeyedChildren方法：
沒有key值，執(zhí)行 patchUnkeyedChildren方法：
注意：當(dāng)沒有key值時，列表過多，也會依次進行patch，會消耗大量性能，那么加上key值后就會節(jié)省很多性能損耗。
結(jié)論：
所以 key值 是在DOM樹進行diff算法時候發(fā)揮作用，一個是用來判斷新舊 Vnode 是否為同一個，從而進行下一步的比較以及渲染，另外一個作用就是判斷組件是否可以復(fù)用，是否需要重新渲染。
到此這篇關(guān)于Vue3中key的作用和工作原理的文章就介紹到這了,更多相關(guān)Vue3中key的作用和工作原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果
這篇文章主要為大家詳細介紹了vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實例詳解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細介紹了Vue參數(shù)的增刪改實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
最近項目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了修改Vue項目運行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
在開發(fā)Web應(yīng)用程序時,表格數(shù)據(jù)的展示和操作是非常常見的需求之一,特別是在處理表格中的復(fù)選框選擇時,我們經(jīng)常需要實現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實現(xiàn)對二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
vue中計算屬性（computed）、methods和watched之間的區(qū)別
這篇文章主要給大家介紹了關(guān)于vue中計算屬性（computed）、methods和watched之間區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章介紹了Vue發(fā)送ajax請求的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03