Vue.js 2中v-if/v-else元素复用逻辑：嵌套元素为何失效

关于元素复用的疑问解答 #

Vue的DOM复用逻辑不是仅针对一级直接子元素，而是基于虚拟DOM对比算法：判断是否复用元素的核心是元素标签名是否一致，以及是否设置了相同的key属性。

你遇到的差异本质是虚拟DOM匹配度的问题：

• 嵌套在label内的input：切换loginType时，两个分支的label结构相似，但内部input属于label的子节点。如果没有给input指定唯一key，Vue在对比label的内容（比如文本）变化时，会认为label内部的子节点需要重新渲染，进而销毁并重建input，导致输入值重置。
• 同级的input：结构更扁平，Vue能直接识别到两个分支里的input属于同一类型元素，即使没有key也会尝试复用，所以输入值得以保留。

让嵌套input复用并保留输入值的方法 #

方法1：给input添加唯一key属性

给两个分支里的input设置相同的key，明确告诉Vue这是同一个元素，应该复用而非重建：

<template v-if="loginType === 'login'">
  <label>用户名</label>
  <input key="auth-input" placeholder="输入用户名">
</template>
<template v-else>
  <label>邮箱</label>
  <input key="auth-input" placeholder="输入邮箱">
</template>

只要key一致，不管input是否嵌套在label里，Vue都会复用该元素，输入值自然保留。

方法2：重构模板，分离条件渲染与input

把label的条件切换和input解耦，让input始终存在于DOM中，仅动态修改label文本和input的placeholder：

<label>{{ loginType === 'login' ? '用户名' : '邮箱' }}</label>
<input :placeholder="loginType === 'login' ? '输入用户名' : '输入邮箱'">

这种方式下input不会被销毁重建，输入值会一直保留。

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