v-for為什麼最好(一定)要加key
阿新 • • 發佈：2021-09-01
v-for指令基於一個數組來渲染一個列表，如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <div id="app"> 12 13 <div> 14 <input type="text" v-model="name"> 15 <button @click="addNewUser">新增</button> 16 </div> 17 18 <ul> 19 <li v-for="(user, index) in userlist"> 20 <input type="checkbox" /> 21 姓名：{{user.name}}22 </li> 23 </ul> 24 </div> 25 26 <script src="./lib/vue-2.6.12.js"></script> 27 <script> 28 const vm = new Vue({ 29 el: '#app', 30 data: { 31 // 使用者列表 32 userlist: [ 33 { id: 1, name: 'zs' }, 34 { id: 2, name:'ls' } 35 ], 36 // 輸入的使用者名稱 37 name: '', 38 // 下一個可用的 id 值 39 nextId: 3 40 }, 41 methods: { 42 // 點選了新增按鈕 43 addNewUser() { 44 this.userlist.unshift({ id: this.nextId, name: this.name }) 45 this.name = '' 46 this.nextId++ 47 } 48 }, 49 }) 50 </script> 51 </body> 52 53 </html>
可以通過v-for將data中的 userlist 迴圈渲染到 li 中，注意第 19 行，沒有使用key
可以看到，不新增key的情況下，勾選一個值後再向其中新增一個值，會造成勾選值的改變，從開始勾選的"ls"變為"zs"
在向v-for中新增key值id後
<li v-for="(user, index) in userlist" :key="user.id">
在使用key後，可以看到勾選值不會再因為新新增值而產生改變
在Vue官方文件中，對於key值的介紹是
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：
可以這樣理解：vue是通過這個 key 值，使其分辨所有節點的身份，根據key值(id)跟蹤找到精確的元素重新排序。
舉個例子就是說：老師(Vue)在找一個學生的時候是通過具有唯一性的 學號(key) 來找到具體的學生，一個學號對應一個學生，不會出現上面勾選值錯誤的情況
在官方api中對key的解釋是：
key的特殊 attribute 主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。而使用 key 時，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。
key值在2.4.2版本之前，只能是 字串或者數字 型別。由於key的唯一性，儘量把id作為key值。index索引的話因為並不具有唯一性，不能作為key值