vue前端開發(fā)途戒，經(jīng)常遇到key為undefine的bug坑傅，如圖
image.png
其實這個情況不是key為undefine，而是一個列表里key值重復了喷斋。
很多時候 我們把后臺返回的Id賦值給key,但是該死的后臺返回的Id居然也有重復的時候唁毒。
這個時候會出現(xiàn)各種意外情況，入頁面卡死星爪，頁面空白浆西，下拉列表點不動等等錯誤。
特別的el-table有寫特殊功能需要我們把row-key賦值顽腾，如果key重復近零，渲染就會失敗。
為了防止key重復抄肖，我們會想當然的認為返回一個隨機數(shù)字就可以了久信，所以會這樣返回一個隨機字符串
Math.random()+''；
但是這其實是有坑的漓摩，這只是解決了首次渲染的問題裙士，但是第二次渲染時，有部分元素我們是希望他重復使用的管毙，這樣渲染效率性能更好腿椎。而且很重要的，有些情況必須這樣夭咬。例如
<div :key=" Math.random()+''" >
<select>
<option v-for="item in list">{{item.name}}</option>
</select>
</div>
這個情況會導致下拉框無法下拉啃炸，因為當下拉時頁面重新渲染，重新渲染又導致父元素被刪除了卓舵，所以無法下拉南用。
key在使用時我們要注意
1.在渲染時該識別為不同時，識別為相同
2.在渲染時該識別為相同，卻識別為了不同
key重復 就是 該為不同時卻識別為相同了
key一直隨機训枢，就是該識別為相同 識別為不同了
下面提供一個生成key的函數(shù) 解決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() + ''
}
/** 方便根據(jù)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() + ''
}
}
