1.v-for的基本使用
我們先不設置key(默認值是index索引值)的情況下，來看一個案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <img src="../img/diff1.png" alt=""> <img src="../img/diff.png" alt=""> <!-- v-for指令: 1.用於展示列表數據 2.語法: v-for=""(item,index) in xxx" : key="yyy" 3.可遍歷:數組、對象、字符非（用的很少)、指定次數（用的很少) --> <ul> <li v-for="(i,index) in persons"> {{i.name}}-{{i.age}}--{{index}} </li> </ul> </div> <script> var app = new Vue({ el: '#app',//選擇標簽 data: {//傳輸數據 persons:[ {id:'1',name:'張三',age:18}, {id:'2',name:'李四',age:19}, {id:'3',name:'王五',age:20} ] } }) </script> </body> </html>
然后看一下效果：
看似沒什么問題，但是需要添加數據的時候，key的作用就出來了，我們再來看一個案例：
我們要在展示的每個人的后面有個輸入框，然后需要添加一個人到persons數組中，並且要添加到數組的最前面，效果出來后需要的每個人后面先寫點東西，然后添加人，我們來看一下key:index
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(i,index) in persons" :key="i.index"> {{i.name}}-{{i.age}}--{{index}} <input type="text"> </li> <button @click="add">點我</button> </ul> </div> <script> var app = new Vue({ el: '#app',//選擇標簽 data: {//傳輸數據 persons:[ {id:'1',name:'張三',age:18}, {id:'2',name:'李四',age:19}, {id:'3',name:'王五',age:20} ] }, methods:{ add(){ const a = {id:4,name:'哈哈哈',age:30} this.persons.unshift(a) } } }) </script> </body> </html>
我們來看效果：
點擊按鈕之后變成：
我們理想中的情況是 0 1 2 分別對應在張三，李四，王五的后面，但是卻沒有，然后我們再看key設置成id的時候的情況：
點擊按鈕之后 我們看到了達到了理想的效果：
其實這都是key的作用
key: key是虛擬DON對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DON】,隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下：
對比規則:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內容沒變,直接使用之前的真實DOM !
②.若虛擬DOM中內容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM.
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key
創建新的真實DOM，隨后渲染到到頁面。
用index作為key可能會引發的問題：
1。若對數據進行:逆序添加、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更==〉界面效果沒問題，但效率低。
2。如果結構中還包含輸入類的DOM:會產生錯誤DOM更新==>界面有問題。
開發中如何選擇key? :
1.最好使用每條數據的唯一標識作為key,比如id、手機號、身份證號、學號等唯一值。
2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，使用index作為key是沒有問題的。