Vue 条件渲染：v-if vs v-show

前言

在 Vue.js 中，条件渲染是构建动态用户界面的重要技术。Vue 提供了两种主要的条件渲染指令：v-if 和 v-show。本文将探讨这两者的区别、使用场景及其底层原理，帮助开发者更好地选择合适的指令来优化应用性能和用户体验。

1. v-if 的工作原理与使用

v-if 指令用于根据条件动态地添加或移除 DOM 元素。当条件为真时，Vue 会创建并插入元素；当条件为假时，Vue 会销毁并移除元素。

使用示例

1
2
3
4
5

<template>
  <div>
    <p v-if="isVisible">这是一个可见的段落。</p>
  </div>
</template>

v-if 与 v-else 和 v-else-if

v-if 可以与 v-else 和 v-else-if 结合使用，以实现多条件渲染。

1
2
3
4
5
6
7

<template>
  <div>
    <p v-if="status === 'success'">操作成功！</p>
    <p v-else-if="status === 'error'">操作失败！</p>
    <p v-else>操作进行中...</p>
  </div>
</template>

v-if 控制多元素的渲染

v-if 也可以用于控制多个元素的渲染，通过包裹在一个父元素中实现。

1
2
3
4
5
6

<template>
  <div v-if="isVisible">
    <h1>标题</h1>
    <p>这是一个段落。</p>
  </div>
</template>

或者在 Vue 3 中使用 <template> 标签：

1
2
3
4

<template v-if="isVisible">
  <h1>标题</h1>
  <p>这是一个段落。</p>
</template>

2. v-show 的工作原理与使用

v-show 指令也用于条件渲染，但其工作原理与 v-if 不同。v-show 通过设置元素的 CSS display 属性来控制元素的显示与隐藏。当条件为真时，元素会被渲染并显示；当条件为假时，元素仍然存在于 DOM 中，但会被隐藏。

使用示例

1
2
3
4
5

<template>
  <div>
    <p v-show="isVisible">这是一个可见的段落。</p>
  </div>
</template>

3. v-if vs v-show 的区别

4. 选择指南

• 使用 v-if 当条件不频繁变化，且需要节省内存时。例如，用户登录状态的切换。
• 使用 v-show 当条件频繁变化，且需要快速切换显示状态时。例如，选项卡切换或模态框显示。

5. 执行顺序

在 Vue 的渲染过程中，当 v-if 和 v-show 同时存在于一个元素的时候，v-if 会优先执行。也就是说，如果 v-if 条件为假，元素不会被渲染，v-show 的条件将不会被评估。但 Vue 官方并不推荐同时使用这两个指令在同一个元素上，因为这可能会导致代码的可读性和维护性降低。

6. 总结

在选择使用 v-if 还是 v-show 时，开发者需要根据具体的业务场景和性能需求来做出决策。一般来说，v-if 更适合用于条件不频繁变化的场景，而 v-show 则更适合用于需要频繁切换显示状态的场景。通过合理地使用这两种指令，可以有效地提升 Vue 应用的性能和用户体验。

7. 参考资料

• Vue.js 官方文档 - 条件渲染