。 4.之所以要加上key是因為vue源碼是內部數據驅動，通過改變數據進而達到改變視圖的效果，加上k ...

前言 在vue中使用v-for時，一直有幾個疑問： v-for為什么要加key 為什么有時候用index作為key會出錯 帶着這個疑問，結合各種博客和源碼，終於有了點眉目。 virtual dom 要理解diff的過程，先要對virtual dom有個了解，這里簡單介紹下 ...

v-for中的key來給每個節點做一個唯一的標識，diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點；key的主要作用是為了高效的更新虛擬dom，另外vue在使用相同標簽名元素的過渡切換時，也會使用到key屬性，目的是讓vue可以區分它們，否則vue只會替換其內 ...

說到這個問題想必要舉個例子了 image 沒有key <div id="app"> <div> <input ...

在日常項目中，我們通常不會注意到這一個點，因為具體在體現上並沒有什么差別，但在性能層面確實不同的，也是需要我們去注意的一點，如果在小項目的情況下，可能不會存在太大的差別，但在大型的項目中，就往往會影響，比如頁面加載太慢，導致的用戶體驗差。主要的原因還是源於 在循環中我們沒有加 key 這個標識 ...

如下圖： 若用Index作為key，當數據更新時，虛擬DOM重新進行對比(diff): 首先,key為0時，文本節點出現不一致,所以要生成一個新的真實DOM 其次，對比input節點，因為虛擬DOM沒有value屬性，所以input節點是一樣的，直接復用 以此類推，就會出現節點錯位問題 ...

vue中列表循環需加:key="唯一標識" 唯一標識可以是item里面id index等，因為vue組件高度復用增加Key可以標識組件的唯一性，為了更好地區別各個組件 key的作用主要是為了高效的更新虛擬DOM v-for中：key的作用總結 key可用來唯一標識組件元素 ...

一、目的： 1、key的作用主要是為了高效的更新虛擬DOM。（此類原理可查看各類文檔） 2、防止不必要的bug出現。 二、如果使用index作為key來使用，會出現bug情形。 如果僅是為了高效更新DOM，可能人們不會在意，殊不知，使用index作為key，還會出現bug，如下情 ...