面试题：Vue 的 v-show 和 v-if 有什么区别？使用场景分别是什么？

v-show 和 v-if 是 Vue 中用于条件渲染的指令，它们的主要区别在于 渲染方式 和 性能开销。以下是它们的详细区别和使用场景：

1. `v-show` 和 `v-if` 的区别

特性	`v-show`	`v-if`
渲染方式	通过 CSS 的 `display: none` 控制显示/隐藏	动态添加或移除 DOM 元素
初始渲染开销	初始渲染时，无论条件是否成立，都会渲染元素	初始渲染时，只有条件成立才会渲染元素
切换开销	切换时性能开销较小（仅修改 CSS）	切换时性能开销较大（需要销毁和重建 DOM）
适用场景	适合频繁切换的场景	适合条件变化较少的场景
生命周期钩子	元素始终存在，不会触发生命周期钩子	元素销毁和重建时会触发生命周期钩子

2. `v-show` 的使用场景

（1）频繁切换显示/隐藏

如果元素的显示状态需要频繁切换（如选项卡、折叠面板等），使用 v-show 性能更好，因为它只是切换 CSS 的 display 属性。

示例

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v-show="isVisible">这是一个 v-show 示例</div>
  </div>
</template>

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

（2）初始渲染成本较高

如果元素的初始渲染成本较高（如包含大量子元素或复杂计算），但需要频繁切换显示/隐藏，使用 v-show 可以避免重复渲染。

3. `v-if` 的使用场景

（1）条件渲染

如果元素的条件变化较少（如根据用户权限显示不同内容），使用 v-if 可以减少初始渲染的开销。

示例

<template>
  <div>
    <div v-if="isAdmin">管理员界面</div>
    <div v-else>普通用户界面</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false
    };
  }
};
</script>

（2）减少 DOM 数量

如果元素在条件不成立时不需要存在（如模态框、对话框等），使用 v-if 可以减少 DOM 数量，提升性能。

示例

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    <div v-if="isModalOpen" class="modal">
      <p>这是一个模态框</p>
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>

（3）触发生命周期钩子

如果需要在元素显示/隐藏时执行一些逻辑（如初始化数据、清理资源等），使用 v-if 可以触发生命周期钩子。

示例

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v-if="isVisible">这是一个 v-if 示例</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  },
  mounted() {
    console.log('组件已挂载');
  },
  destroyed() {
    console.log('组件已销毁');
  }
};
</script>

4. 总结

场景	推荐指令	原因
频繁切换显示/隐藏	`v-show`	切换性能开销小，适合频繁操作。
初始渲染成本较高	`v-show`	避免重复渲染，减少性能开销。
条件变化较少	`v-if`	减少初始渲染开销，适合条件不频繁变化的场景。
减少 DOM 数量	`v-if`	条件不成立时移除 DOM，减少页面元素数量。
触发生命周期钩子	`v-if`	元素销毁和重建时会触发生命周期钩子，适合需要执行初始化或清理的场景。