Vue.js 2中v-for内用v-if异常，key属性使用问题求助

问题场景 #

你在Vue.js 2中编写了两段代码，出现了不符合预期的渲染结果：

异常代码（执行else块） #

<div v-for="person in persons">
    <div v-if="person.status == 'public'" :key="person.id">
        Hi,my name is {{person.name}}
    </div>
    <div v-else :key="person.id">
        This person is private
    </div>
</div>

所有person对象的status属性值均为'public'，但这段代码却执行了else块。

正常代码（执行if块） #

<div v-for="person in persons" :key="person.id">
    <div v-if="person.status == 'public'">
        Hi,my name is {{person.name}}
    </div>
    <div v-else>
        This person is private
    </div>
</div>

修改后代码执行正常。

问题解析 #

1. 第一段代码的核心问题 #

key属性的放置位置完全错误，且v-if/v-else分支使用了重复的key，触发了Vue虚拟DOM的错误复用逻辑。

2. key属性错误为何影响输出 #

Vue中key的作用是给虚拟DOM节点提供唯一标识，帮助Vue准确判断节点是否需要复用或重新渲染。在v-for循环中，key必须绑定在循环的根节点上，用来标识每个循环项的唯一性。

第一段代码中，每个循环项下面的两个分支节点（v-if和v-else）都使用了相同的person.id作为key，这会让Vue误以为这两个节点是同一个节点的不同状态。当数据渲染时，Vue可能错误地复用了之前存在的else分支节点，即使当前person的status是public，也会显示else块的内容。

3. v-for内使用v-if的正确方式 #

正确写法就是你给出的第二种代码：

• 将:key="person.id"绑定在v-for所在的根元素上，确保每个循环项有唯一标识
• v-if/v-else作为循环项的子节点存在，不需要给它们单独加key（因为父节点的key已经能标识整个循环项的唯一性）

4. 是否需要全部修改为第二种写法 #

即使之前用第一种写法没出现问题，也建议全部修改为第二种写法。之前没出问题可能是场景特殊（比如数据无动态更新、循环项数量极少），但第一种写法违反了Vue的官方规范，在数据动态变化、循环项较多时，极易出现DOM渲染异常（比如状态不更新、节点错误复用等），修改为规范写法能从根源避免这类潜在bug。

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