Vue 条件渲染指令：v-if、v-else、v-if-else 与 v-show 相关知识点

Vue 提供了几个强大的指令来简化条件渲染的实现：v-if、v-else-if、v-else 和 v-show。本文将详细介绍这些指令的使用方法，并在最后比较 v-if 和 v-show 的使用场景及它们之间的差异。

使用 v-if、v-else-if、v-else 实现条件渲染

v-if

v-if 指令用于根据表达式的真值来条件性地渲染元素。当表达式的值为真时，元素会被渲染到 DOM 中；当值为假时，元素不会被渲染。

<div v-if="isVisible">看到我了！</div>

v-else-if

v-else-if，顾名思义，是 v-if 的“否则如果”分支，允许链式地表达多个条件。

<div v-if="type === 'A'">A 类型</div>
<div v-else-if="type === 'B'">B 类型</div>

v-else

v-else 用于 v-if 或 v-else-if 条件不成立时的情况，它必须紧跟在 v-if 或 v-else-if 元素的后面。

<div v-if="type === 'A'">A 类型</div>
<div v-else>B 类型或其他</div>

注意：v-if、v-else-if 和 v-else 必须使用在同一个父元素的直接子元素上才能正确识别。

使用 v-show 控制显示状态

v-show 指令根据表达式真假值切换元素的 CSS 属性 display。与 v-if 不同，v-show 不管条件真假，元素始终会被渲染到 DOM 中，仅仅是在显示上进行切换。

<div v-show="isVisible">你看不到我！</div>

v-if vs v-show：使用场景和差异

虽然 v-if 和 v-show 都可以用于根据条件展示元素，但它们背后的实现机制和适用场景有所不同。

• 渲染机制：v-if 是条件性地渲染元素，即如果条件不满足，元素甚至不会被添加到 DOM 中；而 v-show 元素无论条件如何始终会被渲染到 DOM 中，只是通过切换 display 属性来控制显示。

• 性能考虑：因为 v-if 控制的元素不会被频繁切换或者在初始化时条件就不成立，使用 v-if 更为合适，避免了不必要的渲染成本。而 v-show 适用于需要频繁切换显示状态的场景，因为元素始终保持在 DOM 中，切换开销更小。

• 编译过程：v-if 是真正的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。而 v-show 只是简单地切换元素的 display CSS 属性。

• 使用场景：当你的条件很少改变时，推荐使用 v-if；如果需要非常频繁地切换，使用 v-show 会更好。

一个重要的澄清 — v-if 和 v-else-if 时

当使用连续的 v-if 和 v-else-if 时，Vue 创建了一个条件组，这个组内的条件是互斥的，即一旦某个条件成立，后续的条件将不再被检查。而如果使用多个独立的 v-if，每个 v-if 都会独立评估，无论前一个 v-if 的条件是否成立。

v-else-if 的意义

v-else-if 存在的意义在于提供了一种更为直接和高效的方式来表达多分支的条件逻辑。它确保了在一组条件中，只有一个分支会被渲染。这不仅减少了不必要的性能开销（因为一旦找到了匹配的条件，后续条件就不会再被评估了），还提供了编写更加清晰和逻辑性更强的代码的可能。

比较说明

考虑下面的例子：

<div v-if="type === 'A'">A 类型</div>
<div v-else-if="type === 'B'">B 类型</div>

与：

<div v-if="type === 'A'">A 类型</div>
<div v-if="type === 'B'">B 类型</div>

在第一个例子中，如果 type === 'A' 成立，第一个 div 会被渲染，而第二个 div 就不会再检查了。这反映了一个排他性的逻辑关系——“要么是 A 类型，要么是 B 类型”。

在第二个例子中，每个 div 的条件都是独立评估的。这意味着如果 type 同时满足 === 'A' 和 === 'B' 的情况（虽然逻辑上这不可能，但用来说明问题），两个 div 都会被渲染。这在逻辑上不是互斥的，而是两个独立的条件判断，缺乏了“排他性”。

因此，对于根据得分判断等级这样的场景，使用v-else-if是更加简洁的：

场景描述

假设有一个应用，需要根据用户的得分（score）显示他们的等级：

• 得分 90 分及以上，显示为“优秀”。
• 得分在 80 到 89 分之间，显示为“良好”。
• 得分在 70 到 79 分之间，显示为“中等”。
• 得分在 60 到 69 分之间，显示为“及格”。
• 得分低于 60 分，显示为“不及格”。

使用 v-if、v-else-if 和 v-else 实现

<template>
  <div v-if="score >= 90">优秀</div>
  <div v-else-if="score >= 80">良好</div>
  <div v-else-if="score >= 70">中等</div>
  <div v-else-if="score >= 60">及格</div>
  <div v-else>不及格</div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

在这个例子中，使用 v-if 和 v-else-if 构建了一个条件链，它能够确保只有一个条件被满足，并且一旦某个条件被满足，后面的条件将不会再被评估。这样做可以确保每个得分区间的描述是互斥的，每个得分只会对应一个等级描述。

使用多个独立的 v-if 的潜在问题

如果我们尝试使用多个独立的 v-if 来实现相同的功能：

<template>
  <div v-if="score >= 90">优秀</div>
  <div v-if="score >= 80 && score < 90">良好</div>
  <div v-if="score >= 70 && score < 80">中等</div>
  <div v-if="score >= 60 && score < 70">及格</div>
  <div v-if="score < 60">不及格</div>
</template>

虽然这种方法在逻辑上可以达到相同的效果，但它引入了额外的复杂性，因为每个条件都需要明确排除其他条件已经覆盖的得分区间。这不仅使得代码更加冗长，也增加了出错的可能性，特别是在条件表达式需要修改时。

结论

Vue 中的 v-if、v-else-if、v-else 和 v-show 提供了灵活且强大的条件渲染策略。理解它们的不同和适用场景，可以帮助开发者在开发过程中做出更合理的选择，优化应用性能，提升用户体验。在实际应用中，根据具体需求和性能考虑，恰当选择使用 v-if 或 v-show，可以使你的 Vue 应用更加高效和响应快捷。

原文链接：https://juejin.cn/post/7343569488745611273 作者：慕仲卿