Vue@2.7.14中v-if元素复用判定标准查询及相关疑问

核心判定规则 #

Vue判断两个元素是否可复用，核心看两个维度：

• 标签类型：必须是相同标签名的元素（比如<input>和<input>、<div>和<div>），不同标签直接不会被判定为可复用。
• key属性：如果两个元素都没有key，则默认视为可复用；只要其中一个有key、或者两者key值不匹配，就不会复用。

需要明确的是：

• 元素在父节点中的相对位置不影响判定，哪怕两个同标签无key元素在不同分支的不同层级位置，依然会被尝试复用。
• id只是普通HTML属性，Vue的复用逻辑完全不关心它，哪怕两个元素id相同但标签不同，或者标签相同但id不同，都不影响复用判定（只要key和标签符合条件）。

举几个直观例子：

<!-- 会复用input元素 -->
<div v-if="show">
  <input placeholder="请输入">
</div>
<div v-else>
  <input placeholder="请输入">
</div>

<!-- 不会复用，key值不同 -->
<div v-if="show">
  <input key="user-input" placeholder="请输入">
</div>
<div v-else>
  <input key="phone-input" placeholder="请输入">
</div>

<!-- 不会复用，标签类型不同 -->
<div v-if="show">
  <input placeholder="请输入">
</div>
<div v-else>
  <select>
    <option>选择选项</option>
  </select>
</div>

源码参考（Vue 2.x） #

Vue的复用判定逻辑在虚拟DOM的patch阶段，核心函数是src/core/vdom/patch.js中的sameVnode，这是判断两个虚拟节点是否可复用的关键：

function sameVnode(a, b) {
  return (
    a.key === b.key &&
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
}

可以看到，判定条件依次为：key相等、标签名相等、是否为注释节点一致、是否存在data属性一致、输入框类型匹配（针对input标签的特殊校验）。只要这个函数返回true，Vue就会复用对应真实DOM，只更新差异属性；返回false则会销毁旧元素、创建新元素。

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