12.20 一组v-if/v-else-if/v-else 的元素类型相同,应该使用 key

默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的结果。

反例

<div v-if="error">
  错误:{{ error }}
</div>
<div v-else>
  {{ results }}
</div>

规范

<div
  v-if="error"
  key="search-status"
>
  错误:{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  {{ results }}
</div>
原文地址:https://www.cnblogs.com/xjt31/p/14164828.html