最近在學vue，看完vue的基礎部分後大部分的知識都很容易理解，唯獨頻頻提到的key讓我疑惑了很久~

官方文件上對key的第一次描述是：

如果只是單純的看文件，理解的可能不是太清楚，所以我專門寫了上面這個demo來驗證文件所說的：

var t_div = document.createElement('div');     //js建立一個div
console.log(typeof t_div);  
for(item in t_div){
    console.log(item)   //輸出所建立div物件的所有內容
}
 

在diff演算法中，他只會對同級的dom元素進行比較，例如：

<div class="firstFloor">
    <p>這是第二級
        <span>這是第三級</span>
    </p>
</div>

改變後：

<div class="firstFloor">
    <p>這是第二級</p>
    <span>變成了第二級</span>
</div>

這個時候最好的解決方法是將原來的<span>標籤移動到改變後的位置，但diff演算法不這麼做，它首先會比較每一層的變化，就如上面的例子，他的做法是把第三層的<span>標籤先刪掉，再在第二層裡建立一個<span>.那麼在同層比較中：“如果節點型別不同，直接幹掉前面的節點，再建立並插入新的節點，不會再比較這個節點以後的子節點了。如果節點型別相同，則會重新設定該節點的屬性，從而實現節點的更新”（引用知乎說法）。

之前說diff演算法大多時候效果不怎麼好，那key正是來解決這個問題的，所以很直觀，key的作用大大提高了虛擬DOM的更新速度。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。