前言

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

什么是Key

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

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

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

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

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

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

key的作用

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

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

舉個(gè)??

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

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

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

key的底層原理

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

• 創(chuàng)建一份當(dāng)前的虛擬DOM和上一次的虛擬DOM；
• 在數(shù)據(jù)發(fā)生改變后，vue會(huì)通過(guò)比較新舊虛擬DOM的差異來(lái)計(jì)算出需要對(duì)哪些DOM元素進(jìn)行何種類型的操作（新增、刪除、移動(dòng)等）；
• 如果某個(gè)元素上添加了key屬性，在計(jì)算差異時(shí)vue就會(huì)將其作為參考，如果兩次數(shù)據(jù)更新時(shí)，某個(gè)元素的key值沒有發(fā)生變化，則代表這個(gè)元素沒有發(fā)生位置變化，vue會(huì)直接復(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第一次渲染時(shí)，會(huì)根據(jù)items 中的數(shù)據(jù)加載生成虛擬DOM,同時(shí)綁定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ā)生變化，此時(shí)vue仍進(jìn)行渲染，再次生成虛擬DOM，不過(guò)會(huì)對(duì)比上一次生成的虛擬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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論