key的原理

 <div id="root">
    <h3>人员列表（遍历数组）</h3>
    <div class="main">
      <button type="button" @click="addData">在列表头部 添加赵六</button> <br><br>
      <ul>
        <li v-for="(p,index) in persons" :key="index">
          <label> {{p.name}} - {{p.age}}</label> <input type="text">
        </li>
      </ul>
    </div>
  </div>

  <script>
    new Vue({
      el:'#root',
      data:{
        persons:[
          {id:'001', name:'张三',age:'18'},
          {id:'002', name:'李四',age:'19'},
          {id:'003', name:'王五',age:'20'}
        ]
      },
      methods: {
        addData(){
          const p = {id:'004', name:'赵六',age:'28'};
          //数组头部插入
          this.persons.unshift(p);
        }
      },
    })
 </script>

index作为key

1. 页面显示

2. input输入内容

 3. 点击button 添加数据

      根据虚拟DOM对比算法，默认的三条数据生成三个 <li></li> 标签的虚拟DOM（张三 key=0，李四 key=1， 王五 key =2），与添加新数据生成的四个<li></li>标签的虚拟DOM（赵六 key=0 ，张三 key=1，李四 key=2， 王五 key =3）进行对比，key值相同的标签文字发生了变化，更新label里面的文本，在页面上input框输入内容操作的是真实DOM，在虚拟DOM中input标签未发生变化，直接沿用原来的input标签，也会保持原来输入的内容，就会出现上面的情况。

 

 react，vue中key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：

        key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2. 对比规则：

        (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

           1.若虚拟DOM中的内容没变，直接使用之前的真实DOM！

           2.若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

        (2). 旧虚拟DOM中未找到与新虚拟DOM相同的key

           创建新的真实DOM，随后渲染到页面

3.用index作为key可能会引发的问题：

       (1). 若对数据进行：逆序添加，逆序删除等破坏顺序的操作：

            会产生没有必要的真实DOM更新（界面没问题，但效率低）

       (2). 如果结构中还包含输入类的DOM：

            会产生错误DOM更新（界面有问题） 

4. 开发中如何选择key？：

        (1). 最好使用每条数据的唯一标识作为key；

        (2). 如果不存在对数据的破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

 参考：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili