vue中使用v-for为什么要添加key

1. 举例说明
   添加key后可以确保选中的数据不被修改，使用index时候如果数据比较简单还是会根据位置更新
   -----------添加之后被选中数据不变------------------>

     <div id="app">
       <div>
         <button @click="add">添加</button>
       </div>
       <!--     不添加key -->
       <ul>
         <li v-for="item in list">
           <input type="checkbox"> {{item.name}}
         </li>
       </ul>
       <hr>
       <!--     添加id作为key -->
       <ul>
         <li v-for="(item) in list" :key="item.id">
           <input type="checkbox"> {{item.name}}
         </li>
       </ul>
       <hr>
      <!--     使用索引作为key -->
       <ul>
         <li v-for="(item,index) in list" :key="index">
           <input type="checkbox"> {{item.name}}
         </li>
       </ul>
     <div>
   
       <script src="./js/vue.js"></script>
       <script>
         // 创建 Vue 实例，
         var vm = new Vue({
           el: '#app',
           data: {
            list: [
                 { id: 1, name: 1 }, 
                 { id: 2, name: 2 },
                 { id: 3, name: 3 }
             ]
           },
           methods: {
             add() {
               let data = this.list.length + 1
               this.list.unshift({
                 id: data,
                 name: data
               })
             }
           }
         });
       </script>
   

   
    
2. 处理逻辑
   
   在原有数组种插入一条数据
   
   
   默认情况如下:
   此过程只有AB进行了对比,FDE都进行更新,然后插入一个E,效率很低
   
   添加key之后
   此过程只有F进行了插入,ABCDE都进行对比,效率很高
3. 总结
   vue中使用v-for循环时,应该添加key主键,作为唯一标识,可以使用item中的id等字段
   使用key目的是为了高效的更新虚拟DOM.
   原理是在更新过程中通过key,可以精准判断两个节点是否是同一个,避免频繁更新元素,减少DOM操作,提高性能
4. 注意
   1. 不推荐index作为主键: 数组的一个元素变化时,可能会导致其他元素key都发生变化,比如删除key=2的元素,那么后面的key=3的元素就会被更改为key=2,所以会导致数据不稳定
   2. 保证key值唯一:否则会报错,导致渲染失败