优先级 D 的规则：谨慎使用

没有在 v-if / v-else-if / v-else 中使用 key

如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

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

正例：

<div v-if="error" key="search-status">
  错误：{{ error }}
</div>
<div v-else key="search-results">
  {{ results }}
</div>

反例：

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

scoped 中的元素选择器

元素选择器应该避免在 scoped 中出现。

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

详解：

为了给样式设置作用域，Vue 会为元素添加一个独一无二的 attribute，例如 data-v-f3f3eg9。然后修改选择器，使得在匹配选择器的元素中，只有带这个 attribute 才会真正生效 (比如 button[data-v-f3f3eg9])。

问题在于大量的元素和 attribute 组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和 attribute 组合的选择器 (比如 .btn-close[data-v-f3f3eg9]) 慢，所以应该尽可能选用类选择器。

正例：

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

反例：

<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>