vue的v-if与v-show指令有什么区别？

在 Vue 中，v-if 和 v-show 都可以控制元素的可见性，但原理和使用场景有明显区别：

<template>
  <div>
    <!-- v-if：元素可能不存在于 DOM -->
    <p v-if="showIf">v-if 元素</p>

    <!-- v-show：元素始终存在，只是隐藏 -->
    <p v-show="showShow">v-show 元素</p>
  </div>
</template>

原理不同

• v-if：真正的条件渲染。当条件为假时，元素及其子组件不会被渲染到 DOM 中；条件为真时，才会被创建并插入 DOM。
• v-show：简单的 CSS 切换。元素始终存在于 DOM 中，只是通过切换 display: none 来控制显示与隐藏。

切换开销不同

• v-if：切换时涉及组件销毁/重建、生命周期钩子执行、DOM 操作，切换开销大；但初始渲染时如果条件为假，什么都不会做，初始渲染开销小。
• v-show：只是修改 CSS 样式，切换开销很小；但初始渲染无论真假都会渲染 DOM，初始渲染开销较大。

是否支持 <template> 和 v-else/v-else-if

• v-if：可以配合 <template> 使用（用于分组条件），也可以与 v-else、v-else-if 形成条件链。
• v-show：不支持 <template>，也不能与 v-else 配合使用。

适用场景

• v-if：适合运行时条件很少改变的情况（例如权限控制、初始状态为假且大部分时间保持不变）。或者需要避免某些元素因隐藏而保留 DOM（如包含大量计算/请求的组件）。
• v-show：适合频繁切换可见性的场景（例如 tab 切换、折叠面板）。

总结

v-if 是“真实”的渲染/销毁，适合低频切换；

v-show 是 CSS 隐藏，适合高频切换;