ps：大致轉載知乎文章
vue和react的虛擬dom都采用類似的diff算法，核心大概可以歸為兩點
1,兩個相同的組件產生類似的DOM結構，不同的組件產生不同的DOM結構；
2，同一層級的一組節點，他們可以通過唯一的id進行區分。
基於以上兩點假設，是的虛擬的DOM的Diff算法的復雜程度從O(n^3)降到了O(n)。
當頁面的數據發上變化的時候，Diff算法只會比較同一層級的節點：
如果節點類型不同，直接干掉前面的節點，在創建並插入新的節點，不會再比較這個節點以后的子節點了。
如果節點類型相同，則會重新設置節點的屬性，從而實現節點的更新。
當某一層有很多相同的節點時，也就是列表節點時，Diff算法的更新過程默認情況下也是遵循以上的原則。
如下例子：
我們希望在B和C之間加一個F，Diff算法默認執行起來是這樣的
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？
所以我們需要使用key來給每個節點做一個唯一的標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
所以一句話，key的作用就是為了搞笑的更新虛擬DOM。另外vue中在使用相同標簽名元素的過度切換時，
也會使用到key屬性，其目的也是為了讓vue可以區分他們，否則vue只會替換其內部屬性而不觸發過渡效果。
ps：key最好不要用index，用單一的唯一的標記