v-for中的key的使用【key的作用主要是是为了高效的更新虚拟DOM】

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM；

没有绑定key是这样的：

绑定了key的效果：

源码：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="lodash.min.js"></script>
     <style>
         .userList{
             border: 1px solid seagreen;
             padding: 10px 20px;
             margin: 10px 0;
         }
     </style>
 </head>
 <body>
     <div id="app">

     </div>
     <template id="my-com">
         <div class="userList"  :id="obj.id" >
             <h4>武将:{{obj.name}}</h4>
             <p>简介:{{obj.content}}</p>
             <div class="input-group">
                 <input type="text" class="form-control" placeholder="来将可留姓名" >
             </div>
         </div>
     </template>
     <script type="text/javascript">
         Vue.component('my-com',{
             template:'#my-com',
             props:{//传值
                 obj:Object
             }
         })
         var App = {
             data(){
                 return {
                     datas:[
                         {id:1,name:'吕布',content:'我是吕布'},
                         {id:2,name:'赵云',content:'我是赵云'},
                         {id:3,name:'典韦',content:'我是典韦'},
                         {id:4,name:'关羽',content:'我是关羽'},
                         {id:5,name:'马超',content:'我是马超'},
                         {id:6,name:'张飞',content:'我是张飞'},
                     ]
                 }
             },
             template:'<div class="container"><h4>key的作用主要是是为了高效的更新虚拟DOM</h4><button @click="change" class="btn btn-success">改变顺序</button><my-com v-for="(item,index) in datas" :obj="item" :key="item.id"></my-com></div>',
             methods: {
                 change(){
                     this.datas = _.shuffle(this.datas);
                 }
             },
         }
         new Vue({
             el:'#app',
             components:{
                 App
             },
             template:'<App></App>'
         })
     </script>
 </body>
 </html>
 <!--

    如果for循环时不给 不给每个元素 添加key，点击打乱顺序时，会出现 元素与内容对应不上的
    添加key，就不会出现打乱节点的情况

 -->