前端面试必问：v-show 和 v-if 的区别与适用场景，一篇讲

一、先看基础用法

<!-- v-if -->
<div v-if="isShow">我由 v-if 控制</div>

<!-- v-show -->
<div v-show="isShow">我由 v-show 控制</div>

二、核心区别：渲染原理不同

1. v-if：真正的条件渲染

• 当值为 false：元素直接从 DOM 树中移除，不存在；
• 当值为 true：重新创建并插入 DOM。

2. v-show：简单的 CSS 控制

• 为 false：display: none;
• 为 true：恢复原本的 display 样式（block/inline-block 等）

三、详细对比表

四、性能差异：为什么不能乱用？

1. 频繁切换场景：优先 v-show

• Tab 切换
• 折叠面板
• 弹窗频繁开关
• 菜单显示隐藏

2. 不频繁切换：优先 v-if

• 根据用户权限显示模块
• 页面初始化只判断一次的区域
• 复杂组件、懒加载

五、重要细节与坑点

1. v-if 支持 template，v-show 不支持

   v-if 可以用在 <template> 上批量控制多个元素，v-show 不可以。

<!-- 正确 -->
<template v-if="isShow">
  <div>1</div>
  <div>2</div>
</template>

<!-- 错误，不生效 -->
<template v-show="isShow">...</template>

2. v-if 可以搭配 v-else /v-else-if，v-show 不行

   v-if 是完整的条件语句，v-show 只是单纯显示隐藏。
3. v-if 有编译优先级更高

   不要把 v-if 和 v-for 用在同一个元素上，官方明确不推荐。

   如果必须同时存在，v-for 优先级高于 v-if，容易造成性能问题。
4. 组件场景差异

• v-if 控制组件时：组件会重新创建、触发 mounted、销毁触发 beforeDestroy；
• v-show 控制组件时：组件生命周期不会重新执行，只是隐藏。

六、最佳实践：如何选择？

推荐使用 v-if 的场景

• 权限判断（如：管理员才可见的按钮）
• 一次性条件展示
• 复杂组件、需要节省初始渲染资源
• 需要配合 v-else

推荐使用 v-show 的场景

• Tab 切换
• 折叠、展开面板
• 下拉菜单、弹出层
• 任何需要高频显示 / 隐藏的区域

七、总结

1. v-if 是真正的条件渲染，删改 DOM，切换开销大；
2. v-show 是CSS 显示隐藏，保留 DOM，切换开销小；
3. 频繁切换 → v-show；不频繁切换 → v-if；
4. 面试时抓住：渲染机制、性能开销、适用场景三点，就能完美回答。