v-for中不加:key貌似也能正常顯示，那為什么要加:key呢？

我們知道vue可以動態的改變頁面的結構，比如在一個div里面插入一個span標簽，看似簡單的操作，底層還是很復雜的，它是如何實現的呢？因為頁面的html代碼是dom樹形結構，所以這個問題可以理解為將一棵樹形結構轉換為另一棵樹形結構，diff算法就是用來干這個事的。要想把一棵樹轉換為另一棵樹首先要解決的問題就是比較這兩棵樹之間的區別Vue對diff算法進行了優化，它是這樣做的。

現在要把左邊的dom樹轉換為右邊的dom樹，對每層去比較,找出每層節點的不同之處做相應的處理。

對于每一層節點是如何處理的呢?

原來的節點A(也可以為一組節點)去和轉換后的節點C(也可以為一組節點)比較發現并不相同，則會創建節點C并刪除節點A，節點B(也可以為一組節點)比較發現相同不變化，節點C和A比較發現不同，創建節點A，刪除節點C.如此，該層的節點就由A B C轉化成了 C B A 。

如此這番折騰，cpu估計會累的夠嗆，既然這些節點本身沒有發生變化，只是位置變了，有沒有可能只是去調整節點的位置而不用去做如此之多的創建，刪除操作呢？必然是有的。

我們可以對同一層級的同組節點添加一個唯一的key進行區分，此處的key就好比數據庫里面主鍵的概念，通過它可以唯一的確定一組節點。

這樣vue就可以識別出每一組節點，經過比較key發現，A,B,C都是相同的。只是位置發生了變化，于是他就只是去做移動操作調整位置，而不是去做創建和刪除的操作了，效率大大提高。

從這里可以看出，在做for循環的時候加入：key,可以讓vue能夠識別每一組節點，在一些場合中讓我們的代碼效率更高。

還有一個問題就是key的取值，很多伙伴習慣這里取索引index,能行嗎？索引是按位置排序的，這里C的key變成了1，A的key變成了3，失去了key的功能，沒有辦法唯一確定一組節點了。

總結

以上是生活随笔為你收集整理的key value vue 输出_Vue2.0 v-for 中 :key 到底有什么用？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。