说到这个问题想必需举个例子了

沒有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">加上</button>
  </div>
  <ul>
   <li v-for="(item, i) in list">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 建立 Vue 案例,获得 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '张仪' },
     { id: 2, name: '吕不韦' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //留意这儿是unshift
     this.list.unshift({ id:   this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

入选中吕不以时,加上媛媛后选定确实是张仪,并并不是大家要想的結果,大家要想的是当加上媛媛后,一种选定的是吕不以

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第1张

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第2张

有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">加上</button>
  </div>
  <ul>
   <li v-for="(item, i) in list" :key="item.id">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 建立 Vue 案例,获得 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '张仪' },
     { id: 2, name: '吕不韦' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //留意这儿是unshift
     this.list.unshift({ id:   this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

一样入选中吕不以时,加上媛媛后依然选定的是吕不以。

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第3张

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第4张

能够简易的那样了解:加了key(一定要具备唯一性) id的checkbox跟內容开展了一个关系。是大家想做到的实际效果

查过有关文本文档,图示表明很清楚。

vue和react的虚似DOM的Diff优化算法基本相同,其关键是根据2个简易的假定
最先讲一下diff优化算法的解决方式 ,对实际操作前后左右的dom树同一层的连接点开展比照,一层一层比照,如下图:

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第5张

当某一层有很多同样的连接点时,也就是目录连接点时,Diff优化算法的更新过程默认设置状况下也是遵照之上标准。

例如一下这一状况:

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第6张

大家期待能够在B和C中间加一个F,Diff优化算法默认设置实行起來是那样的:

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第7张

即把C升级成F,D升级成C,E升级成D,最终再插进E,是否很沒有高效率?
因此 大家必须应用key来给每一个连接点做一个唯一标志,Diff优化算法就可以恰当的鉴别此连接点,寻找恰当的部位区插进新的连接点。

浅谈VUE中演示v for为什么要加key key v for VUE JavaScript  第8张

vue中目录循环系统要加:key="唯一标志" 唯一标志能够是item里边id index等,由于vue组件高宽比重复使用提升Key能够标志部件的唯一性,为了更好地能够更好地差别每个部件 key的功效主要是为了更好地高效率的升级虚似DOM

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用。