淺談Vue3中key的作用和工作原理

更新時(shí)間：2021年08月08日 08:35:25 作者：易小川打碼

本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這個(gè)key屬性有什么作用呢？我們先來看一下官方的解釋：

kekey屬性主要用在Vue的虛擬DOM diff算法中，在新舊nodes對比時(shí)辨識(shí)Vnodes；
如果不使用key，Vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法
而使用 key 時(shí)，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除/銷毀 key 不存在的元素。

先簡單提一下我對VNode的理解：

VNode的全稱是Virtual Node，也就是虛擬節(jié)點(diǎn)；
Vnode的本質(zhì)是一個(gè)JavaScript的對象；
實(shí)際上在Vue中，無論是組件還是單個(gè)元素，都表示成了一個(gè)個(gè)VNode。

舉個(gè)例子：

<div class="title" style="color: red;">Helllo World</div>
// 實(shí)際上在Vue中會(huì)表示為：
const VNode = {
    type: "div",
    props: {
        class: "title",
        style: {
            color: "red"        
        }    
    },
    children: "Hello World" // 假如div里面還包含著其他標(biāo)簽，那么會(huì)以同樣的方式轉(zhuǎn)成在children里面
}

在什么情況下，插入f效率是最高的呢？

思路：

重新渲染一次（消耗大量性能）
前面的VNode不變，從插入位置重新渲染（消耗較大性能）
所有的VNnode都重新渲染，只需插入新增VNode（性能最好）

結(jié)論：想要最高性能，那么必須給新舊VNodes進(jìn)行key標(biāo)識(shí)，通過key值把舊的VNodes與新的VNodes進(jìn)行對比，想辦法找出需要增加的或者刪除的是哪個(gè)VNode，其他的VNode盡量不變，那么新舊VNodes對比的這個(gè)過程就是diff算法。

Vue事實(shí)上會(huì)對于有key和沒有key會(huì)調(diào)用兩個(gè)不同的方法，下面我們來看看源碼：（packages\runtime-core\src\renderer）

在有key的情況，執(zhí)行 patchKeyedChildren方法：

沒有key值，執(zhí)行 patchUnkeyedChildren方法：

注意：當(dāng)沒有key值時(shí)，列表過多，也會(huì)依次進(jìn)行patch，會(huì)消耗大量性能，那么加上key值后就會(huì)節(jié)省很多性能損耗。

結(jié)論：

所以 key值是在DOM樹進(jìn)行diff算法時(shí)候發(fā)揮作用，一個(gè)是用來判斷新舊 Vnode 是否為同一個(gè)，從而進(jìn)行下一步的比較以及渲染，另外一個(gè)作用就是判斷組件是否可以復(fù)用，是否需要重新渲染。

到此這篇關(guān)于Vue3中key的作用和工作原理的文章就介紹到這了,更多相關(guān)Vue3中key的作用和工作原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue3
key

相關(guān)文章

vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中el-table和jsplumb實(shí)現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue狀態(tài)管理工具Vuex工作原理解析
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能,實(shí)現(xiàn)思路非常簡單，本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
vue3中echarts的tooltip組件不顯示問題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-02-02
關(guān)于Vue中$refs的探索淺析
這篇文章主要給大家介紹了關(guān)于Vue中$refs的探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Vue和uniapp中該如何使用canvas詳解
說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue 左滑刪除功能的示例代碼
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄
這篇文章主要介紹了使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05