key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index(即陣列的下標)來作為key,但其實這是不推薦的一種使用方法。

舉個index作為key的例子：

 1 const list = [
 2     {
 3         id: 1,
 4         name: 'test1',
 5     },
 6     {
 
 7         id: 2,
 8         name: 'test2',
 9     },
10     {
11         id: 3,
12         name: 'test3',
13     },
14 ]

1 <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

下面我們來看一看用index作為key的缺陷

1.在最後一條資料後再加一條資料

 1 const list = [
 2     {
 3         id: 1,
 
 4         name: 'test1',
 5     },
 6     {
 7         id: 2,
 8         name: 'test2',
 9     },
10     {
11         id: 3,
12         name: 'test3',
13     },
14     {
15         id: 4,
16         name: '我是在最後新增的一條資料',
17     },
18 ]

執行結果：

之前的資料                         之後的資料

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插隊的那條資料
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                             key: 3  index: 3 name: test3
 

2.在中間插入一條資料

 1 const list = [
 2     {
 3         id: 1,
 4         name: 'test1',
 5     },
 6     {
 7         id: 4,
 8         name: '我是插隊的那條資料',
 9     }
10     {
11         id: 2,
12         name: 'test2',
13     },
14     {
15         id: 3,
16         name: 'test3',
17     },
18 ]

執行結果：

之前的資料                         之後的資料

key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插隊的那條資料
key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                                         key: 3  id: 3 index: 3  name: test3

通過上面清晰的對比,發現用index作為key的方式除了第一個資料可以複用之前的之外,另外三條資料都需要重新渲染。然而用每條資料的id作為key來標識資料的唯一性這種方式，只有新新增的資料需要渲染，其他的資料複用之前的資料。顯然後一種方式更加的高效。

建議儘可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提升。

至於其中的原因是因為Virtual DOM 使用Diff演算法實現的，詳解請參考官方文件或參考https://www.jianshu.com/p/342e2d587e69部落格

本文轉載於：

作者：funnycoderstar
連結：https://www.jianshu.com/p/342e2d587e69
來源：簡書