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

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

引用

CSDN

1.

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

Vue.js中的v-if和v-show指令是控制元素显示与隐藏的重要工具，它们在实现原理和使用场景上存在显著差异。本文将从基本用法、性能对比、条件变化时的差异、使用场景等多个维度，深入解析这两个指令的特点和最佳实践。

1. 基本用法

• 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：简单的显示/隐藏。当条件为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-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。