v-show 与 v-if 的区别

核心差异

v-show 和 v-if 都能控制元素的显示与隐藏，但实现方式和使用场景完全不同。

v-show 通过 CSS 的 display 属性控制可见性。无论初始条件是什么，元素都会被渲染到 DOM 中，只是根据条件值切换 display: none。

<div v-show="isVisible">这段内容总是存在于 DOM 中</div>

编译结果：

<div style="display: none;">这段内容总是存在于 DOM 中</div>

v-if 是真正的条件渲染。当条件为 false 时，元素及其子节点不会被创建，DOM 中不存在对应的节点。条件切换时伴随组件的销毁与重建。

<div v-if="isVisible">isVisible 为 false 时，这个 div 根本不在 DOM 里</div>

性能特性

维度	v-show	v-if
初始渲染	始终渲染，初始开销固定	条件为 false 时不渲染，初始开销更低
切换开销	仅切换 display，开销极小	销毁/重建 DOM 和组件实例，开销较大
适用场景	频繁切换	条件很少改变、运行时条件稳定

场景选择

优先使用 v-show 的场景：元素需要被频繁地显示和隐藏，比如选项卡切换、折叠面板展开收起。此时使用 v-if 会导致组件反复销毁重建，触发完整的生命周期流程。

优先使用 v-if 的场景：条件在组件生命周期内基本不变，比如根据用户权限决定是否渲染某个模块。此时使用 v-show 会导致无权限用户也能在 DOM 中看到该节点（虽然不可见），增加了不必要的 DOM 节点和潜在的安全风险。

结合使用：在某些场景下可以将两者组合——外层用 v-if 控制是否渲染该区块，内层用 v-show 控制区块内的切换：

<div v-if="hasPermission">
  <div v-show="activeTab === 'detail'">
    <!-- 标签页内容，切换时用 v-show 保持状态 -->
  </div>
</div>

与 v-if / v-for 的关系

v-for 的优先级高于 v-if。当两者出现在同一个元素上时，v-for 先执行，意味着 v-if 会在每次循环迭代中被计算。这在性能上和逻辑上通常不是预期行为——应当将 v-if 放在外层容器上，或者先用计算属性过滤列表数据。