Vue中加上key后會怎樣

這篇文章主要介紹了Vue中加上key后會怎樣的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中加上key后會怎樣文章都會有所收獲，下面我們一起來看看吧。

什么是Key

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

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

• 新增或刪除列表項

• 對比列表項發現位置已經變動

• 通過第三方插件對列表進行操作

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

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

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

key的作用

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

• Key可以告訴Vue哪些元素是新增的，哪些元素已經不存在了，進而更好地掌握整個組件內部的狀態。

• 通過給每個元素添加key，Vue可以更加精確地知道哪些元素被修改了，減少內部狀態混亂和無謂的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函數來定時添加新的列表項。

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

key的底層原理

我們先來了解Vue中實現key的底層原理步驟：

• 創建一份當前的虛擬DOM和上一次的虛擬DOM；

• 在數據發生改變后，vue會通過比較新舊虛擬DOM的差異來計算出需要對哪些DOM元素進行何種類型的操作（新增、刪除、移動等）；

• 如果某個元素上添加了key屬性，在計算差異時vue就會將其作為參考，如果兩次數據更新時，某個元素的key值沒有發生變化，則代表這個元素沒有發生位置變化，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 中的數據加載生成虛擬DOM,同時綁定key值,最后加載為以下的真實DOM節點。

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

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

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

關于“Vue中加上key后會怎樣”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中加上key后會怎樣”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。