Vue.js報錯:Duplicate?keys?detected:‘xxx‘問題的解決
更新時間：2025年11月08日 09:20:59 作者：JJCTO袁龍
文章介紹了在Vue.js中解決`Duplicate?keys?detected`錯誤的步驟,包括定位重復(fù)的key、確保key的唯一性以及在必要時進行去重或添加前綴,同時,文章還提供了一個性能對比,建議在`v-for`中使用唯一且穩(wěn)定的字段作為key,索引只在靜態(tài)列表中使用,以避免警告并提升性能
Vue.js 報錯：Duplicate keys detected: ‘xxx’
當(dāng)你在控制臺看到：
[Vue warn]: Duplicate keys detected: 'xxx'. This may cause an update error.
Vue 在告訴你：
「你在 v-for 里用了重復(fù)的 key，可能會導(dǎo)致渲染錯亂或性能下降。」
按「一看二改三兜底」三步法，3 分鐘解決。
一看：定位重復(fù) key
控制臺會打印出 重復(fù)的具體值 和 組件名，點擊堆棧即可跳轉(zhuǎn)到 v-for 所在行。
二改：讓 key 真正唯一
1.用數(shù)據(jù)庫主鍵或唯一字段
<!-- ? 唯一且穩(wěn)定 -->
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
2.不要用索引作為 key（除非列表永不增刪）
<!-- ? 插入/刪除后索引會變化 -->
<li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
3.拼接生成唯一 key
<!-- ? 組合唯一 -->
<li v-for="item in list" :key="`${item.type}-${item.seq}`">{{ item.name }}</li>
三兜底：去重或加前綴
1.后端數(shù)據(jù)重復(fù) → 前端去重
// 去重保持順序 const uniqueList = list.filter((item, idx, arr) => idx === arr.findIndex(t => t.id === item.id))
2.臨時數(shù)據(jù)加時間戳前綴
// 臨時追加
const tempItem = { ...item, tempId: Date.now() + Math.random() }
性能對比（DevTools）
| key 策略 | 插入/刪除后行為 | 性能 |
|---|---|---|
| 索引 | 節(jié)點復(fù)用錯誤 | ? 最差 |
| 唯一 id | 精準(zhǔn)復(fù)用 | ? 最優(yōu) |
| 拼接唯一 | 同上 | ? 最優(yōu) |
一句話總結(jié)
“Duplicate keys” = v-for 里 key 重復(fù)。
用唯一且穩(wěn)定的字段（id、組合鍵）當(dāng) key，索引只在靜態(tài)列表使用，警告立刻消失。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在一般業(yè)務(wù)中監(jiān)聽的最多的就是 Click 事件，但是在一些業(yè)務(wù)比如 Alert 和 Pop 效果時，需要監(jiān)聽在元素外部的點擊來關(guān)閉彈窗。2020-11-11
這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue中安裝element-ui失敗問題原因及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在vue3中動態(tài)加載遠(yuǎn)程組件的流程步驟
在一些特殊的場景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務(wù)端動態(tài)加載.vue文件,然后將動態(tài)加載的遠(yuǎn)程vue組件渲染到我們的項目中,今天這篇文章我將帶你學(xué)會,在vue3中如何去動態(tài)加載遠(yuǎn)程組件,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
這篇文章主要介紹了vue打包添加gzip配置項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實現(xiàn)微信公眾號菜單編輯器功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
關(guān)于Vue在ie10下空白頁的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁的debug相關(guān)資料，這是最近在工作中遇到的一個問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue3+Echarts頁面加載不渲染顯示空白頁面的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10