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

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

現(xiàn)在要把左邊的dom樹轉(zhuǎn)換為右邊的dom樹，對每層去比較,找出每層節(jié)點的不同之處做相應(yīng)的處理。

對于每一層節(jié)點是如何處理的呢?

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。