前言

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

什么是Key

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

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

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

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

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

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

key的作用

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

• Key可以告訴Vue哪些元素是新增的，哪些元素已經(jīng)不存在了，進(jìn)而更好地掌握整個組件內(nèi)部的狀態(tài)。
• 通過給每個元素添加key，Vue可以更加精確地知道哪些元素被修改了，減少內(nèi)部狀態(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指令來渲染一個列表，并為每個列表項(xiàng)設(shè)置了一個key屬性。 同時使用setInterval函數(shù)來定時添加新的列表項(xiàng)。

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

key的底層原理

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

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

修改上面的??

<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>

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

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

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

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

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

最新評論