Vue.js報(bào)錯(cuò):Duplicate?keys?detected:‘xxx‘問題的解決
更新時(shí)間：2025年11月08日 09:20:59 作者：JJCTO袁龍
文章介紹了在Vue.js中解決`Duplicate?keys?detected`錯(cuò)誤的步驟,包括定位重復(fù)的key、確保key的唯一性以及在必要時(shí)進(jìn)行去重或添加前綴,同時(shí),文章還提供了一個(gè)性能對比,建議在`v-for`中使用唯一且穩(wěn)定的字段作為key,索引只在靜態(tài)列表中使用,以避免警告并提升性能
Vue.js 報(bào)錯(cuò)：Duplicate keys detected: ‘xxx’
當(dāng)你在控制臺看到：
[Vue warn]: Duplicate keys detected: 'xxx'. This may cause an update error.
Vue 在告訴你：
「你在 v-for 里用了重復(fù)的 key，可能會(huì)導(dǎo)致渲染錯(cuò)亂或性能下降?！?/strong>
按「一看二改三兜底」三步法，3 分鐘解決。
一看：定位重復(fù) key
控制臺會(huì)打印出 重復(fù)的具體值 和 組件名，點(diǎn)擊堆棧即可跳轉(zhuǎn)到 v-for 所在行。
二改：讓 key 真正唯一
1.用數(shù)據(jù)庫主鍵或唯一字段
<!-- ? 唯一且穩(wěn)定 -->
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
2.不要用索引作為 key（除非列表永不增刪）
<!-- ? 插入/刪除后索引會(huì)變化 -->
<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í)數(shù)據(jù)加時(shí)間戳前綴
// 臨時(shí)追加
const tempItem = { ...item, tempId: Date.now() + Math.random() }
性能對比（DevTools）
| key 策略 | 插入/刪除后行為 | 性能 |
|---|---|---|
| 索引 | 節(jié)點(diǎn)復(fù)用錯(cuò)誤 | ? 最差 |
| 唯一 id | 精準(zhǔn)復(fù)用 | ? 最優(yōu) |
| 拼接唯一 | 同上 | ? 最優(yōu) |
一句話總結(jié)
“Duplicate keys” = v-for 里 key 重復(fù)。
用唯一且穩(wěn)定的字段（id、組合鍵）當(dāng) key，索引只在靜態(tài)列表使用，警告立刻消失。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實(shí)現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過代碼介紹是非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue2.x安裝并使用SCSS的相關(guān)資料,以及如何在vue 2.x中全局引用公共scss文件,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟
vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue3關(guān)于RouterView插槽和過渡動(dòng)效
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動(dòng)效,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
文章介紹了Vue單頁應(yīng)用中出現(xiàn)404錯(cuò)誤的原因,以及如何通過配置Nginx和使用Vue Router的hash模式來解決這個(gè)問題,同時(shí),文章還簡要解釋了單頁應(yīng)用的概念及其優(yōu)點(diǎn)和缺點(diǎn),并討論了Router的實(shí)現(xiàn)方式2024-12-12
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識到原生代碼里的template可能有問題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來的，雖然解析器在加載頁面的時(shí)候確實(shí)會(huì)處理這部分代碼片段2023-02-02
Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼
今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08