v-if 和 v-show 都是 Vue 中用于条件性地控制元素显示的指令，但它们的底层原理和适用场景截然不同。

最核心的区别可以概括为：v-if 是“真·销毁/重建”（操作DOM），而 v-show 是“假·隐藏/显示”（操作CSS）。

简单说：v-if 是“真条件渲染”，条件为假时‌直接销毁 DOM 元素‌；v-show 是“假隐藏”，元素‌始终渲染‌，只是通过 CSS 的 display 属性来切换显隐。‌‌

核心区别

• ‌实现原理‌：v-if 通过动态创建/销毁 DOM 节点实现；v-show 只是切换元素的 display: none。
• ‌初始渲染‌：v-if 条件为假时‌不会渲染元素‌；v-show 不管条件如何，元素‌都会被渲染‌，只是初始可能隐藏。
• ‌切换性能‌：v-if 切换涉及 DOM 的销毁与重建，成本高；v-show 只是改 CSS，切换更轻量。
• ‌生命周期‌：v-if 切换会触发组件的‌销毁和重建‌，因此会走完整的生命周期；v-show 从 false 变 true 时‌不会触发生命周期‌。‌‌

下面从 4 个维度讲解：

1. 底层渲染机制（本质区别）

•  v-if（真正意义上的条件渲染）：
  • 初始条件为 false 时，元素根本不会被渲染到 DOM 树上。
  • 当条件切换为 true 时，Vue 会重新创建该元素及其内部的所有组件、事件监听器，然后插入 DOM。
  • 当条件切回 false 时，Vue 会彻底销毁该元素对应的 DOM 节点和组件实例（触发 beforeDestroy 等生命周期）。
• v-show（简单的 CSS 切换）：
  • 无论初始条件是什么，元素始终会被渲染并保留在 DOM 中。
  • 它只是简单地通过内联样式切换 display: n one; 和 display: block;（或其默认值）来控制显隐。

2. 性能开销（什么时候用谁）

• v-if 切换开销大，但初始渲染开销小：因为它只在需要时才渲染内容。如果初始条件为 false，它一开始什么都不做。
• v-show 初始渲染开销大，但切换开销小：因为它一上来就要渲染所有元素，之后切换时只是改个 CSS 属性，非常快。

结论（最佳实践）：

• 如果元素的显示状态需要频繁切换（比如：Tab 切换、折叠面板、显示/隐藏密码），请用 v-show。
• 如果元素的显示状态在运行时很少改变（比如：根据用户权限判断是否显示某个模块，刷新页面后基本不变），请用 v-if。

3. 对v-else/v-else-if的支持

• v-if：支持配合 v-else-if 和 v-else 使用，可以构建完整的条件判断链（就像你上一段代码里写的那样）。
• v-show：不支持 v-else 或 v-else-if。它只能单独使用，要么显示，要么隐藏，没有多分支逻辑。

4. 能否用在标签上

• v-if：可以。因为  不是真实 DOM 节点，v-if 负责控制其内部块的整体渲染，非常常用。
• v-show：不可以。因为  不会生成真实的 DOM 元素，v-show 无法给一个不存在的 DOM 挂上 display: none 样式。

举个直观的例子

假如有一个 isShow 变量为 false：

我是 v-if，不存在于 DOM

我是 v-show，只是被藏起来了

总结

一句话口诀帮你记忆：频繁切换用v-show，条件分支用v-if；v-if是生是灭，v-show是穿脱马甲。

到此这篇关于在vue中v-if和v-show的核心区别的文章就介绍到这了,更多相关vue v-if和v-show区别内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！