Vue核心知识：v-if和v-show指令详解

Vue核心知识：v-if和v-show指令详解

引用

CSDN

1.

https://blog.csdn.net/sixpp/article/details/144628381

在Vue开发中，v-if和v-show是两个常用的条件渲染指令，它们都能实现元素的显示与隐藏，但其背后的工作原理和适用场景却有所不同。本文将从基本用法、性能对比、使用场景等多个维度，深入解析这两个指令的区别与联系，帮助开发者更好地选择和使用它们。

目录

• 1. 基本用法
• v-if
• v-show
• 2. 性能对比
• 3. 条件变化时的差异
• v-if
• v-show
• 4. 使用场景
• 适用 v-if 的场景
• 适用 v-show 的场景
• 5. 结合 v-if 和 v-show 使用
• 6. v-if 与 v-for 一起使用时的区别
• 总结

在 Vue 中，v-if 和 v-show 都是用来控制元素的显示与隐藏的指令，但它们的实现原理和适用场景有所不同。以下是它们的各种情况以及区别。

1. 基本用法

v-if

• v-if 是条件渲染。当条件为 true 时，元素会被渲染到 DOM 中；当条件为 false 时，元素会被从 DOM 中完全移除。
• 每次条件变化时，Vue 会销毁并重新创建 DOM 元素。

<template>
  <div>
    <p v-if="isVisible">这是一个可见的元素</p>
    <button @click="isVisible = !isVisible">切换显示</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>

v-show

• v-show 是简单的显示/隐藏。当条件为 true 时，元素会被渲染并显示；当条件为 false 时，元素会被隐藏，但依然保留在 DOM 中，只是通过 CSS 的 display 属性来控制可见性。
• 不论初始条件是 true 还是 false，元素都会被渲染到 DOM 中。

<template>
  <div>
    <p v-show="isVisible">这是一个可见的元素</p>
    <button @click="isVisible = !isVisible">切换显示</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>

2. 性能对比

v-if 和 v-show 在性能上存在显著差异：

• v-if：由于每次条件变化都会销毁和重新创建 DOM 元素，因此在初始渲染时性能较高，但频繁切换时性能较低。
• v-show：由于元素始终存在于 DOM 中，只是通过 CSS 控制显示状态，因此在频繁切换时性能较高，但初始渲染时性能较低。

3. 条件变化时的差异

v-if

• 当条件从 false 变为 true 时，Vue 会重新渲染元素并将其添加到 DOM 中。
• 当条件从 true 变为 false 时，Vue 会将元素从 DOM 中移除。

v-show

• 无论条件如何变化，元素始终存在于 DOM 中，只是通过 CSS 的 display 属性来控制显示状态。

4. 使用场景

适用 v-if 的场景：

• 当需要根据条件渲染大量 DOM 元素时
• 当条件很少发生变化时
• 当需要完全移除元素时

适用 v-show 的场景：

• 当需要频繁切换元素的显示状态时
• 当元素的显示状态需要通过动画过渡时

5. 结合 v-if 和 v-show 使用

在某些情况下，可以将 v-if 和 v-show 结合使用，以达到更好的性能和功能：

<template>
  <div>
    <p v-if="shouldRender" v-show="isVisible">这是一个可见的元素</p>
    <button @click="isVisible = !isVisible">切换显示</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const shouldRender = ref(true)
const isVisible = ref(true)
</script>

在这个例子中，v-if 控制元素是否被渲染，而 v-show 控制元素的显示状态。这样可以避免不必要的 DOM 操作，同时保持元素的显示状态可控。

6. v-if 与 v-for 一起使用时的区别

当 v-if 和 v-for 一起使用时，v-if 的优先级高于 v-for。这意味着 Vue 会先根据 v-if 的条件判断是否需要渲染列表，然后再进行列表的遍历。

<template>
  <div>
    <ul v-if="shouldRenderList">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const shouldRenderList = ref(true)
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])
</script>

在这个例子中，只有当 shouldRenderList 为 true 时，列表才会被渲染。如果 shouldRenderList 为 false，列表将不会被渲染，也不会进行 v-for 的遍历。

总结

v-if 和 v-show 都是 Vue 中用于控制元素显示与隐藏的重要指令，但它们的使用场景和性能特点各不相同。v-if 适用于条件很少变化且需要完全移除元素的场景，而 v-show 则适用于频繁切换显示状态的场景。在实际开发中，开发者需要根据具体需求和性能考虑，合理选择使用 v-if 还是 v-show，甚至将两者结合使用以达到最佳效果。