列表渲染
-
實際開發中，使用每條數據的唯一標識作為key,也就是對于數組列表，對象中的屬性如：id、手機號、身份證號、學號等唯一值，對象列表同理
-
只要不對列表的逆序添加，逆序刪除等破壞順序的操作，僅用于渲染和展示。使用index作為key是沒有問題的。
-
<body><ul>//:key是對象數組的身份證，對數組中的每個對象進行遍歷<li v-for="p in persons" :key="p.id">{{name}}--{{age}}</li><li v-for="(p,index)" :key="index" >{{name}} -----{{age}}</li>//對象遍歷<li v-for="(value,k) of car" :key="k" >{{k}} -----{{value}}</li></ul> </body> <script>const vm = new Vue({el:'#root',data: {//數組列表persons:[{id: 001,name: 'marry',age:12},{id: 002,name: 'axios',age:11},{id: 003,name: 'ajax',age:15}]，//對象列表car: {name: '大眾',price: '1222',color: 'black'}}}) </script> -
key的底層原理
-
遍歷列表時，vue將初始數據轉成虛擬DOM（頁面），vue會給虛擬DOM添加key值，之后虛擬DOM轉成真實DOM放入頁面。
如果用戶修改了頁面信息，vue根據新的數據生成新的虛擬DOM，新的虛擬DOM與虛擬DOM的數據對比
-
使用index作為key的問題
-
用：key="index"對原本的數組索引的順序，造成了破壞。也就是新的虛擬DOM與虛擬DOM的對象，在索引位置為0的位置屬性值不一致，就會實現，新的虛擬DOM與虛擬DOM的對象屬性相同的部分，直接用虛擬DOM的對象屬性。不相同的部分，用新的虛擬DOM對象屬性。缺點一：產生新的DOM更新，效率低。缺點二：對象屬性使用輸入類的DOM，會產生錯誤
-
如果新的虛擬DOM與虛擬DOM的對象索引號匹配不上，則創建新的真實DOM，渲染到頁面上。
-
<body><ul><!--once為點擊一次就失效，--><button @click.once="add">點我添加一個對象到數組中</button><li v-for="(p,index)" :key="index" >{{name}} -----{{age}}<!--加入文本框--><input type="text"> </li></ul> </body> <script>const vm = new Vue({el:'#root',data: {//數組屬性persons:[{id: 001,name: 'marry',age:12},{id: 002,name: 'axios',age:11},{id: 003,name: 'ajax',age:15}]},methods: {add(){const p = {id: 004,name:'lala', age: 20}//push方法是往數組屬性索引為0的位置添加一組對象this.person.push(p);}}}) </script> -
使用index作為key的思維圖
【獨一無二】)
