每天一个小技巧之Vue的v-if和v-show详解

关注大师姐不迷路，大师姐带你上高度~

---

前言

关注大师姐不迷路，大师姐带你上高度~
在vue中v-if和v-show是最常用到的指令，那么他们之间有什么区别呢？
v-if 和 v-show 都是 Vue.js 中用于控制元素显示与隐藏的指令，但它们在实现机制和使用场景上有明显区别。以下是对两者的详细讲解：

一. v-if

• 作用：根据表达式的值来决定是否渲染该元素。
• 原理：如果条件为假，则元素不会存在于 DOM 中；如果为真，元素会被渲染到 DOM 中。
• 特点：
  • 惰性渲染：只有当条件第一次变为真时才会渲染元素。
  • 开销较大：频繁切换 v-if 的值会导致频繁地创建和销毁元素，因此适合不经常变化的条件。
  • 可以搭配 v-else-if 和 v-else 使用。

示例代码

<template>
  <div>
    <p v-if="isVisible">这段文字会根据 isVisible 的值显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

在这个例子中，当 isVisible 为 true 时，<p> 标签会被渲染到页面上；如果 isVisible 为 false，则 <p> 标签不会出现在 DOM 中。

---

二. v-show

• 作用：根据表达式的值来决定是否显示该元素。
• 原理：无论条件真假，元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制其可见性。
• 特点：
  • 即时渲染：无论条件如何，元素都会被渲染到 DOM 中。
  • 切换成本低：由于不需要重新创建和销毁元素，切换时性能更好。
  • 不支持 v-else 系列指令。

示例代码

<template>
  <div>
    <p v-show="isVisible">这段文字会根据 isVisible 的值显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

在这个例子中，即使 isVisible 为 false，<p> 标签仍然存在于 DOM 中，只是通过 CSS 的 display: none 来隐藏它。

---

三. v-if 与 v-show的对比

特性	v-if	v-show
渲染方式	条件为假时，元素不会渲染到 DOM	元素始终渲染到 DOM，通过 CSS 控制显示
性能	适合不经常变化的条件，频繁切换会有较高开销	适合频繁切换的条件，切换时性能较好
支持 v-else	支持 v-else-if 和 v-else	不支持 v-else 系列指令
适用场景	当条件很少变化时（例如初始化加载）	当需要频繁切换显示状态时

---

总结

关注大师姐不迷路，大师姐带你上高度~

• 如果你希望完全移除或添加一个元素，可以选择 v-if。
• 如果你需要频繁切换元素的显示状态，建议使用 v-show，因为它避免了 DOM 的重复创建和销毁，性能更优。
• 在实际开发中，根据具体需求选择合适的指令，以达到最佳的用户体验和性能表现。