## 使用index作為key可能會應發的問題? ### 1、效率問題，頁面不會出現展示問題 * 如果對數據進行逆序添加、刪除等破壞順序操作，會產生沒有必要的真實DOM更新，頁面效果沒有問題，但是效率低下。 * 我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的：  即把C更新成F，D更新成C，E更新成D，最后再插入E，這樣效率不高，且性能不夠好。  ### 2、存在輸入類DOM，產生錯亂數據展示問題 * 如果DOM結構中還包括輸入類（input、textarea）DOM ，會產生錯誤的DOM更新，界面明顯看到問題。 * 如下圖所示，當我們在列表中，在每個輸入框中添加對應（數據）內容，逆向添加一個數據，在紅色框中的位置，可以看到輸入框中的數據產生錯亂。   * 下面我們來分析一下原因 1）、初始化數據，根據數據生成虛擬DOM，將虛擬DOM轉化為展示DOM； 2）、更新數據，向初始數據逆序添加一個數據（老劉-30），生成新數據； 3）、數據變化，生成新的虛擬DOM； 4）、新舊虛擬DOM比較：查找相同key值，如果查詢到，存在差異，則以新虛擬DOM替換舊虛擬DOM，反之，則使用久虛擬DOM； 5）、如下圖，key=0時，老劉-30與張三-18不等，則替換；input則完全一樣，則使用舊虛擬DOM，但是發現沒有，key=1,2...每一步都需要替換，（張三、李四、王五都需要新舊替換）效率低下問題出現； 6）、當key=3時，在舊的虛擬DOM中未找到，則創建新的虛擬DOM； 7）、將新的虛擬DOM轉化為真實DOM。  ## 解決index作為key可能引發的問題 * 通過唯一標識作為key，則簡潔很多 1）、前四步都一樣，從第五步開始節省，查找key=004，發現在舊虛擬DOM并未找到，直接創建新的虛擬DOM； 2）、后面key=001,002,003...都在舊的虛擬DOM中查詢到，則直接使用舊虛擬DOM 3）、將新的虛擬DOM轉化為真實的DOM。  ## 總結：key有什么作用（內部原理） ### 1、虛擬DOM中的key作用 * key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據新數據生成新的虛擬DOM，隨后Vue進行新虛擬DOM和舊虛擬DOM的差異比較；比較規則如: 1）、舊虛擬DOM中找到了與新虛擬DOM相同地key：如果虛擬DOM內容沒有變化，則直接使用之前的真實DOM；如果虛擬DOM中內容發生改變，則生成新的真實DOM，隨后替換掉頁面之前的真實DOM； 2）、舊虛擬DOM中未找到與新虛擬DOM相同地key，則創建新的真實DOM，隨后渲染到頁面。 ## 開發中如何選擇key? * 最好使用每條數據的唯一標識作為key，比如id、身份賬號、手機號等等； * 如果不存在對數據逆序添加、刪除等破壞順序的操作，僅用于列表展示，使用index作為key是沒有問題的。