活用Vue指令：避开v-if与v-show使用误区，避免真实bug场景

2023-11-28 15:27:03

v-if 与 v-show：Vue 指令的微妙差异

在 Vue 开发中，v-if 和 v-show 是两大常被混淆的指令。它们都控制元素的显示或隐藏，但其背后的工作机制却大相径庭。混用或误用这些指令可能导致性能问题甚至 bug。

深入剖析 v-if 和 v-show 的差异

v-if：条件渲染

v-if 指令根据一个布尔表达式来决定是否渲染一个元素。如果表达式为真，元素将被插入到 DOM 中；否则，元素将被移除。这种行为类似于 JavaScript 的三元运算符 ? :。

<div v-if="isVisible">可见元素</div>

v-show：显示/隐藏

v-show 指令与 v-if 不同，它不控制元素的渲染，而是控制其可见性。即使元素在 DOM 中，当 v-show 表达式为假时，元素也会被隐藏；当表达式为真时，元素将被显示。

<div v-show="isVisible">可见元素</div>

适用场景

v-if：动态创建/销毁元素

v-if 最适用于需要动态创建或销毁元素的情况，例如根据用户输入生成表单元素，或者根据数据变化切换组件。

v-show：频繁切换元素可见性

v-show 则更适合频繁切换元素可见性的情况，例如 tab 栏切换、下拉菜单展开/收起等。

真实案例：v-show 解决 tab 切换卡顿问题

以下是一个真实案例，展示了如何使用 v-show 解决因误用 v-if 导致的 tab 切换卡顿问题：

<template>
  <div class="tab-bar">
    <div class="tab-item" v-if="isActive">选中态</div>
    <div class="tab-item" v-if="!isActive">未选中态</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

在此示例中，v-if 被用于根据 isActive 属性值来渲染不同的 tab 状态。然而，由于 tab 切换频繁，导致页面出现卡顿。调整为使用 v-show 后，问题得到解决：

<template>
  <div class="tab-bar">
    <div class="tab-item" v-show="isActive">选中态</div>
    <div class="tab-item" v-show="!isActive">未选中态</div>
  </div>
</template>