Vue中v-show与v-if的区别

1、渲染机制不同

• v-if
  • 惰性渲染： 初始化条件为false 时不会渲染元素到DOM。
  • 切换时： 条件变化会销毁/重建组件/元素（触发生命周期钩子）。
  • 支持template 标签和v-else/v-else-if。
• v-show
  • 始终渲染： 无论条件如何，元素始终存在于DOM中。
  • 切换时： 仅通过 CSS 的display: none控制显示/隐藏（无生命周期变化）。

2、性能对比

• v-if 切换成本高
  适合不频繁切换的场景（如初始化渲染决定是否显示）。

<div v-if="isExpensive">耗性能的内容（如复杂组件）</div>

• v-show 初始化成本高
  适合频繁切换的场景（如选项卡切换）。

<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