key的作用是什么模暗？
key是給每一個vnode的唯一id,可以
依靠key,更準確, 更快的拿到oldVnode中對應的vnode節(jié)點传透。
可以參考一下這個sameVnode的源碼窍箍。
? 官網(wǎng)推薦的使用key怨规，應該理解為“使用唯一id作為key”俭茧。因為index作為key开皿，和不帶key的效果是一樣的涧黄。index作為key時篮昧，每個列表項的index在變更前后也是一樣的，都是直接判斷為sameVnode然后復用笋妥。
說到底懊昨，key的作用就是更新組件時判斷兩個節(jié)點是否相同。相同就復用春宣，不相同就刪除舊的創(chuàng)建新的酵颁。
? 正是因為帶唯一key時每次更新都不能找到可復用的節(jié)點，不但要銷毀和創(chuàng)建vnode月帝，在DOM里添加移除節(jié)點對性能的影響更大躏惋。所以會才說“不帶key可能性能更好”∪赂ǎ看下面這個實驗簿姨，渲染10w列表項，帶唯一key與不帶key的時間對比：
不使用key的情況：
<li v-for="item in list">{{ item.text }}</li>
使用id作為key的情況：
list構(gòu)造
const list1 = []
const list2 = []
for (let i = 0; i <= 100000; i++) {
list1.push({
id: i,
text: i
})
list2.push({
id: i * 2,
name: 100000 - i
})
};
因為不帶key時節(jié)點能夠復用簸搞，省去了銷毀/創(chuàng)建組件的開銷扁位，同時只需要修改DOM文本內(nèi)容而不是移除/添加節(jié)點，這就是文檔中所說的“刻意依賴默認行為以獲取性能上的提升”
既然如此趁俊，為什么還要建議帶key呢域仇？因為這種模式只適用于渲染簡單的無狀態(tài)組件。對于大多數(shù)場景來說寺擂，列表組件都有自己的狀態(tài)殉簸。
舉個例子：一個分頁組件的列表，列表里的每項包含圖片和文字沽讹。不帶key屬性的情況下般卑，在第一頁然后切換到第二頁時，第二頁的圖片每項顯示的還是第一頁的圖片爽雄，可以為列表項帶上id作為唯一key蝠检，那么每次渲染列表時都會完全替換所有組件，使其擁有正確狀態(tài)挚瘟。
這只是個簡單的例子叹谁，實際應用會更復雜。帶上唯一key雖然會增加開銷乘盖，但是對于用戶來說基本感受不到差距焰檩，而且能保證組件狀態(tài)正確，這應該就是為什么推薦使用唯一id作為key的原因订框。至于具體怎么使用析苫，就要根據(jù)實際情況來選擇了。
本文到底就結(jié)束啦~
