1、渲染机制不同
- v-if
- 惰性渲染： 初始化条件为false 时不会渲染元素到DOM。
- 切换时： 条件变化会销毁/重建组件/元素（触发生命周期钩子）。
- 支持template 标签和v-else/v-else-if。
- v-show
- 始终渲染： 无论条件如何，元素始终存在于DOM中。
- 切换时： 仅通过 CSS 的display: none控制显示/隐藏（无生命周期变化）。
2、性能对比
- v-if 切换成本高
适合不频繁切换的场景（如初始化渲染决定是否显示）。
js
<div v-if="isExpensive">耗性能的内容（如复杂组件）</div>- v-show 初始化成本高
适合频繁切换的场景（如选项卡切换）。
js
<div v-show="isActive">频繁切换的内容</div>3、生命周期影响
- v-if
条件为true 时触发mounted 等钩子；为false 时触发unmounted。 - v-show
无论条件如何，组件的生命周期不会重新触发。
4、使用场景示例
| 场景 | 推荐指令 | 原因 |
|---|---|---|
| 初始加载时决定是否显示 | v-if | 避免渲染不需要的DOM节点 |
| 频繁切换显示状态（如菜单） | v-show | 避免重复销毁/重建的性能损耗 |
| 涉及高开销组件 | v-if | 减少不必要的初始化开销 |
总结表格
|特性 |v-if |v-show |
|初始渲染 |条件为真才渲染|总是渲染|
|切换开销 |高（销毁/重建）|低（CSS切换）|
|生命周期 |触发钩子|不触发|
|DOM 存在性 |条件为假时移除|始终存在（隐藏）|
|适用场景|不频繁切换|频繁切换|
简单记忆：
- 需要减少初始负载 → v-if
- 需要快速切换显示 → v-show