著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
連結:http://caibaojian.com/vue2-0-rule.html
來源:http://caibaojian.com
提到v-for需要設定鍵值，許多人第一反應會從diff算法的角度去講原因，我更喜歡舉一個例子來示範一下原因
假設有這樣的一個頁面，頁面的清單是通過周遊數組得來的，如下圖所示
示例代碼如下
現在需要删除第二個元素。下面我們分别在渲染清單是 不使用key,使用索引作為key, 使用唯一值id作為key,看三種場景删除第二個元素之後的效果
可以看到，不使用key，删除第二個元素之後，輸入框前面的數字顯示正确的，但是數字3後面的輸入框的内容顯示錯了，應該顯示 我是第三個
可以看到，使用索引作為key之後，與不使用key的效果一樣，删除第二個元素之後，輸入框前面的數字顯示正确的，但是數字3後面的輸入框的内容顯示錯了，應該顯示 我是第三個
使用id作為key,顯示正确
為什麼v-for需要設定key，原因很簡單。 對比數組 [1,2,3]和[1,3]，我們很容易發現删掉了2，但是計算機不是這樣的邏輯
計算機對比新舊數組，發現1===1，保持不變
然後再對比2，發現2變成了3，那麼就把2修改為3，原來第二行的元素都可以複用，隻把數字改一下就可以了
然後在對比3與undefined，發現3被删了，索引把第三行的元素删掉
那麼為什麼不能用索引作為key呢？ 當删掉[1,2,3]中的2之後，數組的長度由3變成了2，那麼原來數字3的索引就變成了數字2的索引了。
1.計算機對比key為0的值，發現都是1，保持不變
2.計算機對比key為1的值，發現從2變成了3，元素複用， 修改元素上面的文字
3.計算機對比key為2的值，發現被删掉了，是以删掉第三行元素
而對于使用id作為key,那麼每條資料都有了唯一的辨別，當删掉[{id:‘1’,value: 1},{id: ‘2’,value: 2}, {id: ‘3’, value:3}]中的第二個，整個過程如下
1.計算機取出新資料第一項的id，然後在原來資料裡面尋找，發現存在相同id的資料，而且資料沒有變化，是以保持不變
2.計算機繼續取第二項的id，發現是3，然後從原來資料裡面也找到了3，是以3保留
3.這時候舊資料裡面剩了id為2的資料，而新的裡面沒有了，是以删掉。