首先按官网介绍的，可以主要用在Vue的虚拟Dom算法，在新旧节点对比时辨识VNodes。使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

 

        有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。

        vue中循环列表时，绑定:key的值往往有两种方式，一是将循环列表的索引值index作为key，而是根据返回数据中的唯一标识作为key。不管以什么方式绑定key，key的值在列表中必须是唯一的，可以使用index的原因是索引值必然是唯一的。、

        以下举例子说明以index或者唯一标识符绑定key的时的执行流程

1 index作为key

1.比如有初始数据如下：

   {id:'001',name:'张三',age:'18'},
    {id:'002',name:'李四',age:'19'},
    {id:'003',name:'王五',age:'20'}

2. 在模板使用v-for循坏该数据。以列表li的形式显示

      <ul>
            <li v-for="(index,item) in data" :key="index">
                {item.name} - {item.age}
                <input type="text">
            </li>
        </ul>

3. 那么vue会根据数据生成虚拟DOM，生成的虚拟DOM形式如下：

        <li key="0">张三 - 18 <input type="text"></li>
        <li key="1">李四 - 19 <input type="text"></li>
        <li key="2">王五 - 20 <input type="text"></li>

4.将虚拟DOM转成真实的DOM

 ---------------------分割：以上是vue从绑定数据且从虚拟DOM转成真实DOM的过程----------------------

5.接下来说明数据发现变化时，key绑定值位index时数据的改变，改变数据如下

             {id:'004',name:'老刘',age:'20'},
             {id:'001',name:'张三',age:'18'},
             {id:'002',name:'李四',age:'19'},
             {id:'003',name:'王五',age:'30'}

6.此时由于数据变化了，那么vue就会重复数据渲染过程，此时根据新数据生成的虚拟DOM如下

            <li key="0">老刘 - 30 <input type="text"></li>
            <li key="1">张三 - 18 <input type="text"></li>
            <li key="2">李四 - 19 <input type="text"></li>
            <li key="3">王五 - 20 <input type="text"></li>

7.将虚拟DOM转成真实DOM

 8.接下来解释为什么会出现以上的情况？

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

         （1）在旧虚拟DOM中找到了与新虚拟DOM相同的key：

             -  旧虚拟DOM中内容没有变化的时候，则直接使用之前的真实DOM（比如上面的input的内容）

             -  若虚拟DOM中的内容发生变化了，则直接生成新的DOM，随后替换掉页面中之前的真实DOM

        （2）旧虚拟DOM中未找到与新虚拟DOM相同的key

               - 直接创建新的真实DOM，随后渲染到页面上

        （3） 由于以上例子并没有绑定key值，那么每次循环的时候key值都是自上而下从0-n，而自上而下input值没有发生改变，因此直接复用

以上过程可以综合为下图

2  id作为key

        当id作为key时，从数据的绑定到渲染时，步骤基本一致，只不过是当数据发生改变的时候，【旧虚拟DOM】与【新虚拟DOM】之间的对比时由于id的存在，当遇到id相同的值时，则是直接复用，而不断niindex的顺序。基本如下：

3 总结

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

• 若对数据进行：逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新==>界面效果没问题，但效率低
• 如果结构中还包含输入的DOM如input，会产生错误的DOM更新==>界面有问题

2.开发中如何选择key？

• 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
• 如果不存在对数据的逆序添加、逆序删除等破快顺序的手段，仅用与渲染列表展示，使用index作为key是没有问题的。