让我们一起走向未来
🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐
目录
- 让我们一起走向未来
- 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 中，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>
总结
-
v-if是条件渲染，适用于初始加载或条件变化较少的情况，因为每次变化都会销毁并重建 DOM 元素。 -
v-show是显示/隐藏，适用于频繁切换的场景，因为它只改变元素的display样式，不会销毁和重建 DOM 元素。
选择何时使用 v-if 或 v-show，取决于：
- 频繁切换显示/隐藏 → 使用
v-show。 - 不频繁切换，或者初次渲染时需要复杂的 DOM 结构 → 使用
v-if。
