vue key值的重复键问题报错

1.问题描述：在vue2.0+ 中做一个公用的评论组件，:key使用的时创建评论的时间，当加载更多的时候，会报错：

Duplicate keys detected: '2019-01-24T07:15:35.000Z'.This may cause an update error. 

2. 出问题的代码部分：

<li v-for="(item, i) in cmtList" :key="item.createTime"></li>

3. 分析问题：

由于多人可以同时发表评论，如果是时间完全相同就会出现这样的警告！！！

不同的v-for循环使用了相同的key值造成了这个警告，为了避免由于相同的key值造成的警告，可以使用以下方法：

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="'A'+ i"></div>

<div v-for="(item, i) in items3" :key="'B',+ i"></div>

//这里例子中的 A,B 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性

4. 优化

v-for是不推荐使用index下标来作为key的，因为index作为标识时，插入一条数据时，该条数据后面的数据都发生了变化，那么当前v-for都会对key变化的元素重新渲染，但是插入数据之前的没有发生变化，也就是说当操作v-for数据时会导致不必要的开销，可以使用数据的唯一值，比如id等字段。当然啦只是展示的数据无所谓。

 

5. 备注

参考：https://stackoverflow.com/questions/51086657/vue-warn-duplicate-keys-detected-x-this-may-cause-an-update-error