Vue 3中的`v-if` vs `v-show`：如何选择与性能优化

Vue 3中的`v-if` vs `v-show`：如何选择与性能优化

引用

CSDN

1.

https://blog.csdn.net/hyc010110/article/details/143048631

引言

在Vue中，v-if和v-show是用于控制元素显示和隐藏的两种常见指令。尽管它们的功能看似相似，但在实现机制、性能影响和使用场景上有显著差异。本文将深入探讨v-if与v-show的区别、各自的性能影响以及如何根据实际场景选择合适的指令进行条件渲染。

v-if和v-show的区别

2.1 v-if

v-if是按需渲染，即在条件满足时将元素插入DOM树，不满足时则将元素从DOM中移除。每次条件变化时，Vue都会重新渲染和销毁该元素，适合用于频繁切换的情况。

示例 ：

<p v-if="isVisible">This is conditionally rendered with v-if.</p>

2.2 v-show

v-show并不会移除或添加DOM元素，而是通过修改CSS的display属性来控制元素的显示和隐藏。元素一直存在于DOM中，只是可见性发生变化。

示例 ：

<p v-show="isVisible">This is conditionally shown with v-show.</p>

何时选择使用v-if而非v-show

3.1 v-if的使用场景

v-if适用于以下场景：

• 元素的渲染较为昂贵，包含大量子组件或需要复杂计算。
• 条件切换不频繁，避免频繁的DOM操作。

示例 ：

<!-- 复杂的表单或列表，渲染开销较大时使用 v-if -->
<div v-if="isComplexFormVisible">
  <complex-form></complex-form>
</div>

3.2 v-show的使用场景

v-show适用于以下场景：

• 需要频繁切换显示状态，且不需要完全移除元素。
• 元素的初始渲染成本较低，切换仅限于视觉层面。

示例 ：

<!-- 简单的内容展示，频繁切换时使用 v-show -->
<div v-show="isVisible">Content is frequently toggled</div>

v-if的性能影响与场景选择

4.1 v-if的性能影响

由于v-if会完全移除或添加DOM元素，每次条件切换都会导致组件实例的重新创建或销毁。这对性能有较大的影响，特别是当元素包含复杂的逻辑或子组件时，渲染和销毁过程开销较大。

示例 ：

<!-- 频繁切换时不建议使用 v-if，渲染开销过高 -->
<heavy-component v-if="isVisible"></heavy-component>

4.2 场景选择

1. 元素渲染复杂 ：如果渲染或卸载某个元素的开销非常大，比如复杂的表单、大数据表等，应该选择v-if，以避免长时间挂载不使用的元素。
2. 条件切换频繁 ：如果条件切换非常频繁，建议使用v-show，因为v-if频繁重绘会导致性能下降。

条件渲染的最佳实践及其对DOM更新的影响

5.1 条件渲染的最佳实践

1. 简化逻辑 ：尽量将条件渲染控制在组件内部，避免在多个地方进行复杂的条件判断。
2. 选择合适的指令 ：对于开销较大的组件或需要频繁切换的内容，应该根据实际情况选择v-if或v-show。
3. 减少不必要的渲染 ：在不需要显示的元素上使用v-if来完全移除元素，避免它们对性能的负担。

示例 ：

<!-- 根据场景合理使用 v-if 和 v-show，确保性能最佳化 -->
<template v-if="isUserLoggedIn">
  <user-profile></user-profile>
</template>

<div v-show="isDropdownVisible">Dropdown content</div>

5.2 对DOM更新的影响

• v-if ：每次条件变化时，Vue会执行完整的DOM操作，性能开销较大，适合条件不频繁改变的情况。
• v-show ：通过CSS控制元素的显示和隐藏，不涉及DOM的销毁和创建，性能开销小，适合频繁切换的场景。

结论

在Vue 3中，v-if和v-show各自有着独特的性能表现与应用场景。v-if适合不频繁切换且渲染开销较大的场景，而v-show更适合频繁显示和隐藏的元素。了解它们的区别和最佳实践，有助于提高应用的性能和代码的可维护性。