Vue中v-if和v-show的区别？

在Vue中，v-if和v-show都可以用来条件性地显示或隐藏元素，但它们在DOM中的实现方式和适用场景有根本不同。简单说，v-if是“真正的”条件渲染，而v-show只是CSS级别的显示切换。

v-if：条件性的渲染与销毁

v-if是指令性的。当它的值为false时，对应的元素（及其子组件）不会在DOM中被渲染。这意味着该元素不存在于DOM树中，相关的事件监听器和子组件生命周期也会被触发销毁。

<template>
  <button @click="toggle">切换</button>
  <div v-if="isVisible">使用 v-if 控制</div>
</template>

<script>
export default {
  data() {
    return { isVisible: false }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
}
</script>

当isVisible为false时，检查Elements面板，你会发现这个<div>根本不存在。切换为true时，元素会被重新创建并插入DOM。因此，v-if在切换不频繁且条件可能在初始化时为假时更高效，因为它避免了初始渲染的成本。它也可以与v-else、v-else-if配合使用。

v-show：基于CSS的显示切换

v-show则简单得多。无论条件真假，元素始终会被渲染并保留在DOM中。它只是通过切换元素的CSSdisplay属性（在none和其原始值之间）来控制可见性。

<div v-show="isVisible">使用 v-show 控制</div>

即使isVisible为false，你依然能在Elements面板中看到这个<div>，只是它的样式为display: none。因此，切换v-show只会触发简单的CSS变化，不会涉及组件的创建与销毁。

性能考量与选择指南

选择哪一个主要取决于切换的频率和初始条件。

• 使用 v-if：当条件在运行时很少改变，或者初始条件很可能为false时。因为它能减少初始DOM节点数，节省内存。同时，如果条件块内包含耗初始化的组件或逻辑，v-if的惰性渲染能避免不必要的开销。
• 使用 v-show：当需要非常频繁地切换显示状态时（如标签页切换、可折叠菜单）。因为切换v-show的成本远低于v-if的销毁和重建，它能保证更流畅的交互体验。

一个重要的细节是，v-if是“惰性”的，如果初始为假，其内的代码块（包括子组件的created、mounted钩子）直到条件首次为真时才会执行。而v-show的元素，无论是否可见，其初始渲染逻辑都会执行。

理解这个区别，你就能根据具体场景做出明智的选择，在功能与性能之间找到最佳平衡点。