首先按官网介绍的，可以主要用在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是没有问题的。