因爲不理解 ：key（v-bind:key），網上查了一些的資料，這篇寫得非常不錯，很簡潔清楚。
其實不只是vue，react中在執行列表渲染時也會要求給每個組件添加上key這個屬性。
要解釋key的作用，不得不先介紹一下虛擬DOM的Diff算法了。
我們知道，vue和react都實現了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的Diff算法。
**vue和react的虛擬DOM的Diff算法大致相同，其核心是基於兩個簡單的假設：**
- 兩個相同的組件產生類似的DOM結構，不同的組件產生不同的DOM結構。
- 同一層級的一組節點，他們可以通過唯一的id進行區分。
基於以上這兩點假設，使得虛擬DOM的Diff算法的複雜度從O(n^3)降到了O(n)。
這裏我們借用React’s diff algorithm中的一張圖來簡單說明一下：
** 如果節點類型不同，直接幹掉前面的節點，再創建並插入新的節點，不會再比較這個節點以後的子節點了。
** 如果節點類型相同，則會重新設置該節點的屬性，從而實現節點的更新。
我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的：
image
即把C更新成F，D更新成C，E更新成D，最後再插入E，是不是很沒有效率？
所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
所以一句話，**key的作用主要是爲了高效的更新虛擬DOM**。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是爲了讓vue可以區分它們，
否則vue只會替換其內部屬性而不會觸發過渡效果。
本篇來自：https://www.jianshu.com/p/0044532e4a93 如有雷同，純屬緣分