资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Vue核心知识：v-if和v-show

创作时间:

作者:

@小白创作中心

Vue核心知识：v-if和v-show

引用

CSDN

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

在 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 中，display: none 被应用到该元素上。不会销毁 DOM 元素，仅仅是通过 display 样式来控制可见性。
```
<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-if 条件很复杂，或者元素很重，每次条件变化时都需要重新渲染和销毁元素。这样在频繁切换显示/隐藏时性能较差，尤其是在大量 DOM 元素需要渲染时。
v-show

v-show 会一直保留元素在 DOM 中，只是通过 CSS 控制其显示或隐藏。所以它的开销较小，尤其是频繁切换时性能更好。

选择时机：
如果频繁切换显示/隐藏，且不需要重新渲染元素，使用 v-show 更加高效。
如果条件变化频率较低，或者元素初始化时需要加载较重的内容，可以使用 v-if，因为它不会在 DOM 中保留不需要的元素。

3. 条件变化时的差异

v-if

每次条件改变时，Vue 会销毁之前的元素，并重新创建元素。

如果条件本身复杂，或者涉及到子组件，v-if 会重新实例化这些子组件，因此可能会增加一些开销。

<template>
  <div>
    <p v-if="isVisible">这是一个动态生成的元素</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
// 每次 isVisible 变化时，DOM 会被销毁并重新创建
</script>

v-show

条件变化时，元素的 display 样式会切换，但元素始终存在于 DOM 中。不会涉及 DOM 的销毁和重建。

<template>
  <div>
    <p v-show="isVisible">这是一个一直在 DOM 中的元素</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
// 每次 isVisible 变化时，DOM 元素不变，仅仅是 display 样式的变化
</script>

4. 使用场景

适用 v-if 的场景

条件判断比较复杂的场景，尤其是涉及到组件的渲染与销毁。对于大量的内容，尤其是涉及复杂逻辑的，v-if 适合用于那些条件变化较少的情况。
```
<template>
  <div>
    <ChildComponent v-if="isVisible" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const isVisible = ref(true)
</script>
```
需要在条件满足时初始化一些重的组件或渲染较多内容时，v-if 比较合适，因为它能避免不必要的渲染。

适用 v-show 的场景

需要频繁切换显示/隐藏的场景，v-show 性能较好。例如，一个非常简单的条件切换（如 true/false）时，v-show 更为高效。

<template>
  <div>
    <button @click="isVisible = !isVisible">切换</button>
    <p v-show="isVisible">这个元素切换频繁</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>

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

有时候，你可能希望根据不同的条件使用 v-if 和 v-show，例如在某些情况下仅渲染元素，而在其他情况下仅切换显示隐藏。你可以根据条件决定使用哪种指令。

<template>
  <div>
    <p v-if="shouldRender" v-show="isVisible">这是一个既使用了 v-if 又使用了 v-show 的元素</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const shouldRender = ref(true) // 控制是否渲染
const isVisible = ref(true)   // 控制是否显示
</script>

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

当 v-if 和 v-for 一起使用时，v-if 应该放在 v-for 之前，否则它会导致 v-for 在每次循环时都会进行判断。

<!-- 错误用法，v-if 会作用于每个循环项 -->
<div v-for="item in items" v-if="item.visible">
  {{ item.name }}
</div>
<!-- 正确用法，v-if 应该作用于整个 v-for 循环 -->
<div v-if="items.length > 0">
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</div>