Vue条件渲染：v-if与v-show区别及性能选择

脚本专家

背景与核心结论
Vue中v-if和v-show都用于条件控制显示，但实现路径不同。v-if是真正的条件渲染：条件为假时元素不进入DOM，切换时创建或销毁DOM及组件实例；v-show是CSS显隐：元素始终渲染并留在DOM中，只切换内联display样式。由此带来初始渲染、切换性能、生命周期和语法限制上的差异。

底层渲染机制
v-if在初始条件为false时，元素不会被渲染到DOM树。条件变为true时，Vue会重新创建该元素及其内部组件、事件监听器，再插入DOM；条件变回false时，会彻底销毁对应DOM节点和组件实例，触发beforeDestroy等生命周期。v-show则无论初始条件是什么，元素始终会被渲染并保留在DOM中，通过内联样式在display:none和display:block（或默认值）之间切换。

性能开销与选型
v-if切换开销大，但初始渲染开销小：初始条件为false时什么都不渲染，只在需要时创建。v-show初始渲染开销大，但切换开销小：一开始就渲染全部元素，后续切换只是修改CSS属性。选型原则是：显示状态需要频繁切换时用v-show，例如Tab切换、折叠面板、密码显隐；显示状态在运行时很少改变时用v-if，例如根据用户权限判断是否显示某个模块、刷新页面后基本不变。

语法限制：v-else链与template
v-if支持配合v-else-if和v-else使用，可以构建完整的条件判断链；v-show不支持v-else或v-else-if，只能单独控制显示或隐藏。v-if可以用在<template>标签上，因为template不是真实DOM节点，v-if负责控制其内部块的整体渲染；v-show不能用在<template>标签上，因为template不会生成真实DOM元素，v-show无法给一个不存在的DOM挂上display:none样式。

直观示例
假设isShow变量为false：

2. <!-- v-if：审查元素时，这段HTML完全消失，DOM中找不到 -->
3. <div v-if="isShow">我是 v-if，不存在于 DOM</div>
5. <!-- v-show：审查元素时，这段HTML存在，只是多了内联样式 style="display: none;" -->
6. <div v-show="isShow">我是 v-show，只是被藏起来了</div>

复制代码

上面的示例展示了排查时的直观差异：v-if为false时DOM中无该节点；v-show为false时节点仍在，只是被display:none隐藏。理解这一点，有助于定位“元素找不到”和“元素存在但不显示”两类问题。

实践建议
1. 先判断切换频率：高频切换优先用v-show，低频或一次性条件优先用v-if。
2. 需要v-else-if或v-else分支链时，只能用v-if。
3. 需要控制<template>内多个元素整体渲染时用v-if，不要用v-show。
4. 关注生命周期：v-if切换会触发组件销毁和重建，走完整生命周期；v-show从false变为true不会触发生命周期，依赖生命周期做初始化或清理的逻辑要放在正确位置。
5. 排查显示问题时，先看DOM是否存在：不存在多为v-if条件为假；存在但不可见可检查v-show对应的内联display状态。

总结
口诀：频繁切换用v-show，条件分支用v-if；v-if是生是灭，v-show是穿脱马甲。核心差异来自DOM创建或销毁与CSS display切换两条不同实现路径，选型时围绕切换频率、分支需求和template限制判断即可。