前言

最近接手了一個Vue項目,很多的代碼片段使用到了key， 結合自己以前接觸key的經歷，于是思考，在Vue中加上key發(fā)生了什么？ 最后翻找資料，寫下這篇博客記錄。

什么是Key

在Vue中，我們通常會使用v-for指令來渲染列表。 當數(shù)據源發(fā)生改變時，Vue會盡可能高效地更新DOM元素以反映這些變化。 然而，在某些情況下，Vue無法跟蹤并處理到底哪些元素發(fā)生了變化。

當一個Vue組件的狀態(tài)發(fā)生改變時，Vue會重新渲染組件反應出這些變化。 但是，如果這個Vue組件中包含列表，那么每次重新渲染時，都要重新創(chuàng)建這個列表。 當這個列表發(fā)生以下操作時，都會重新更新整個列表。 如果這個列表的數(shù)據量很大的時候，這樣操作會極大影響性能。

• 新增或刪除列表項
• 對比列表項發(fā)現(xiàn)位置已經變動
• 通過第三方插件對列表進行操作

為了解決上述問題，Vue引入了一種特殊屬性——key。

Key是用來追蹤哪些元素被新增、被修改、被刪除的輔助標識。在進行前后對比時， 會基于Key的變化判斷是復用現(xiàn)有DOM節(jié)點還是銷毀再重建，從而提高Vue的渲染效率和性能。

在Vue的虛擬DOM算法中，同級別的元素之間互相比較是按照它們的先后順序進行遍歷的。 如果可復用的元素沒有設置Key，則會按照就近原則，配對成功后更新差異，這可能導致內部狀態(tài)混亂。

key的作用

key屬性用于標識一個元素的唯一性，當列表中的數(shù)據發(fā)生改變時，Vue會根據key值來對比哪些數(shù)據是新的，哪些數(shù)據是舊的， 從而渲染新的數(shù)據，而不用渲染整個列表。

• Key可以告訴Vue哪些元素是新增的，哪些元素已經不存在了，進而更好地掌握整個組件內部的狀態(tài)。
• 通過給每個元素添加key，Vue可以更加精確地知道哪些元素被修改了，減少內部狀態(tài)混亂和無謂的DOM操作，從而提高性能。

舉個??

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  },
  mounted() {
    setInterval(() => {
      this.items.push({ id: Date.now(), name: 'New Item' });
    }, 1000);
  }
};
</script>

在這個例子中，我們使用v-for指令來渲染一個列表，并為每個列表項設置了一個key屬性。 同時使用setInterval函數(shù)來定時添加新的列表項。

如果我們不使用key屬性，那么每次添加新的列表項時，Vue都會重新渲染整個列表。 這樣會導致性能問題，并且會破壞一些用戶交互效果。 但是，如果我們使用key屬性，Vue就可以根據每個列表項的唯一標識來判斷哪些是新的，哪些是舊的。 這樣就可以只更新需要更新的元素，而不是重新渲染整個列表。

key的底層原理

我們先來了解Vue中實現(xiàn)key的底層原理步驟：

• 創(chuàng)建一份當前的虛擬DOM和上一次的虛擬DOM；
• 在數(shù)據發(fā)生改變后，vue會通過比較新舊虛擬DOM的差異來計算出需要對哪些DOM元素進行何種類型的操作（新增、刪除、移動等）；
• 如果某個元素上添加了key屬性，在計算差異時vue就會將其作為參考，如果兩次數(shù)據更新時，某個元素的key值沒有發(fā)生變化，則代表這個元素沒有發(fā)生位置變化，vue會直接復用它，而不是重新渲染。

修改上面的??

<template>
    <button @click="add">Add Fruit</button>
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</template>
<script>
    data() {
    return {
        items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
        ]
    };
    },
    methods:{
    add(){
        const fruit = {'id':'4', 'name':'Chestnut'}
        this.items.unshift(fruit)
    }
}
</script>

當vue第一次渲染時，會根據items 中的數(shù)據加載生成虛擬DOM,同時綁定key值,最后加載為以下的真實DOM節(jié)點。

<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Orange</li>

當我們點擊 button 按鈕后，items 數(shù)據源發(fā)生變化，此時vue仍進行渲染，再次生成虛擬DOM，不過會對比上一次生成的虛擬DOM，最后根據綁定的key值重新渲染，加載為以下的真實DOM節(jié)點。

<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Orange</li>
<li key="4">Chestnut</li>

到此這篇關于一文詳解Vue中加上key后發(fā)生什么的文章就介紹到這了,更多相關Vue  key 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論