vue列表渲染之for循环

前端开发中，如果涉及列表渲染，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么以下会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

1、作用

在虚拟DOM中，key是虚拟DOM对象的标识，当数据发生变化是，vue会根据新的数据生成新的虚拟DOM，随后Vue进行新的虚拟DOM与旧的DOM的差异比较（diff算法）。对比规则如下：

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

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

（2）如果旧虚拟DOM中找到了与新虚拟DOM相同的key：

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

2、用index作为key可能会引发的问题

（1）性能消耗：若对原数据进行，逆序添加、逆序操作等破坏数组顺序的操作，则会产生没有必要的真实DOM更新，界面会呈现应有的效果，但是效率低，需要底层进行多余的新旧DOM对比，导致部分节点无法复用。

（2）数据错位：如果结构中包含输入类的DOM，那么则会产生错误的DOM更新，会产生界面数据错乱问题。

3、如何选择key

（1）推荐使用每条数据的唯一标识作为key，比如id，手机号，工号等唯一值。

（2）如果不存在对数据的逆序添加，逆序删除等破坏数组顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。