vue前端开发，经常遇到key为undefine的bug，如图
image.png
其实这个情况不是key为undefine，而是一个列表里key值重复了。
很多时候 我们把后台返回的Id赋值给key,但是该死的后台返回的Id居然也有重复的时候。
这个时候会出现各种意外情况，入页面卡死，页面空白，下拉列表点不动等等错误。
特别的el-table有写特殊功能需要我们把row-key赋值，如果key重复，渲染就会失败。
为了防止key重复，我们会想当然的认为返回一个随机数字就可以了，所以会这样返回一个随机字符串
Math.random()+''；
但是这其实是有坑的，这只是解决了首次渲染的问题，但是第二次渲染时，有部分元素我们是希望他重复使用的，这样渲染效率性能更好。而且很重要的，有些情况必须这样。例如
<div :key=" Math.random()+''" >
<select>
<option v-for="item in list">{{item.name}}</option>
</select>
</div>
这个情况会导致下拉框无法下拉，因为当下拉时页面重新渲染，重新渲染又导致父元素被删除了，所以无法下拉。
key在使用时我们要注意
1.在渲染时该识别为不同时，识别为相同
2.在渲染时该识别为相同，却识别为了不同
key重复 就是 该为不同时却识别为相同了
key一直随机，就是该识别为相同 识别为不同了
下面提供一个生成key的函数 解决Key重复，key随机问题
getRowKey(row) {
/** 检查row.id是否有重复的缓存对象 */
if (!this.checkRepeatObj) {
this.checkRepeatObj = {}
}
if (row) {
if (row.id) {
if (this.checkRepeatObj[row.id]) {
if (!row._secondId) {
row._secondId = Math.random() + ''
}
/** 方便根据key重用元素 */
return row._secondId
} else {
this.checkRepeatObj[row.id] = 1
return row.id
}
}
console.log('row.id为空')
if (!row._secondId) {
row._secondId = Math.random() + ''
}
return row._secondId
} else {
console.log('row为空')
return Math.random() + ''
}
}
