Vue3中key的作用和工作原理是什么

這篇文章主要介紹“Vue3中key的作用和工作原理是什么”，在日常操作中，相信很多人在Vue3中key的作用和工作原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中key的作用和工作原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

• kekey屬性主要用在Vue的虛擬DOM diff算法中，在新舊nodes對比時辨識Vnodes；

• 如果不使用key，Vue會使用一種最大限度減少動態元素并且盡可能的嘗試就地修改/復用相同類型元素的算法

• 而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除/銷毀 key 不存在的元素。
  

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

• VNode的全稱是Virtual Node，也就是虛擬節點；

• Vnode的本質是一個JavaScript的對象；

• 實際上在Vue中，無論是組件還是單個元素，都表示成了一個個VNode。

舉個例子：

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

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

思路：

• 重新渲染一次（消耗大量性能）

• 前面的VNode不變，從插入位置重新渲染（消耗較大性能）

• 所有的VNnode都重新渲染，只需插入新增VNode（性能最好）

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

Vue事實上會對于有key和沒有key會調用兩個不同的方法，下面我們來看看源碼：（packages\runtime-core\src\renderer）

在有key的情況，執行 patchKeyedChildren方法：

沒有key值，執行 patchUnkeyedChildren方法：

注意：當沒有key值時，列表過多，也會依次進行patch，會消耗大量性能，那么加上key值后就會節省很多性能損耗。

結論：

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

到此，關于“Vue3中key的作用和工作原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！