Vue3 JSON/对象树形查看器存在值重复导致的键重复Bug

问题根源 #

出现这个问题的核心原因是Vue列表渲染时的key设置错误：如果你的v-for循环把属性值（value）作为key，当多个属性值完全相同时，key就会重复，Vue的虚拟DOM会错误地复用这些节点，导致不同的键被当成同一个节点渲染，出现重复或替换的情况。

解决方案 #

确保v-for循环使用**唯一的键名（key）**作为节点标识，而不是属性值：

1. 基础对象渲染修正
   把原来可能的错误写法：

   <div v-for="(value, key) in currentObj" :key="value">
     {{ key }}: {{ value }}
   </div>
   

   修改为：

   <div v-for="(value, key) in currentObj" :key="key">
     {{ key }}: {{ value }}
   </div>
   

2. 嵌套树形结构的进阶处理
   如果是多层嵌套的树形组件，为了避免不同父节点下出现相同键名导致的key重复，可以结合父级键名生成唯一key：

   <!-- 子组件TreeNode.vue -->
   <template>
     <div>
       <span>{{ keyName }}</span>
       <div v-if="isObject(value)" class="children">
         <TreeNode 
           v-for="(childVal, childKey) in value" 
           :key="`${keyName}-${childKey}`" 
           :key-name="childKey" 
           :value="childVal" 
         />
       </div>
     </div>
   </template>
   

原理说明 #

Vue通过key来区分不同的DOM节点，当key唯一时，Vue能准确跟踪每个节点的状态，不会因为值重复而错误复用DOM元素。使用键名（或组合键）作为key，能保证每个节点的标识在当前层级（或全局）是唯一的，彻底解决值重复导致的渲染异常。

内容的提问来源于stack exchange，提问作者Gino