vue前端開發(fā)，經(jīng)常遇到key為undefine的bug，如圖

image.png

其實這個情況不是key為undefine，而是一個列表里key值重復(fù)了。

很多時候 我們把后臺返回的Id賦值給key,但是該死的后臺返回的Id居然也有重復(fù)的時候。
這個時候會出現(xiàn)各種意外情況，入頁面卡死，頁面空白，下拉列表點不動等等錯誤。

特別的el-table有寫特殊功能需要我們把row-key賦值，如果key重復(fù)，渲染就會失敗。

為了防止key重復(fù)，我們會想當然的認為返回一個隨機數(shù)字就可以了，所以會這樣返回一個隨機字符串
Math.random()+''；

但是這其實是有坑的，這只是解決了首次渲染的問題，但是第二次渲染時，有部分元素我們是希望他重復(fù)使用的，這樣渲染效率性能更好。而且很重要的，有些情況必須這樣。例如

   <div :key=" Math.random()+''" >
       <select>
              <option v-for="item in list">{{item.name}}</option>
         </select>
   </div>

這個情況會導(dǎo)致下拉框無法下拉，因為當下拉時頁面重新渲染，重新渲染又導(dǎo)致父元素被刪除了，所以無法下拉。

key在使用時我們要注意

1.在渲染時該識別為不同時，識別為相同

2.在渲染時該識別為相同，卻識別為了不同

key重復(fù) 就是 該為不同時卻識別為相同了
key一直隨機，就是該識別為相同 識別為不同了

下面提供一個生成key的函數(shù) 解決Key重復(fù)，key隨機問題

  getRowKey(row) {
  /** 檢查row.id是否有重復(fù)的緩存對象 */
  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() + ''
  }
}