v-show 和 v-if 的区别及使用场景分析
作者：那一抹阳光多灿烂
v-show通过CSS控制显示隐藏,保持DOM元素,适合频繁切换；v-if根据条件生成/销毁DOM,影响生命周期,适用于静态条件,两者在性能、渲染方式及组件状态管理上有显著差异,需根据具体场景选择,本文通过实例代码解析v-show和v-if的区别及使用,感兴趣的朋友一起看看吧
v-show 和 v-if 的区别及使用场景
一、v-show 与 v-if 的共同点
两者都能控制元素在页面中的显示与隐藏（不包括 v-else 情况），且用法相同：
<Model v-show="isShow" /> <Model v-if="isShow" />
当表达式为 true 时，元素都会占据页面位置；为 false 时，都不会占据位置。
二、v-show 与 v-if 的区别
v-show 和 v-if 的区别核心区别
| 特性 | v-if | v-show |
|---|---|---|
| 渲染机制 | 条件为真时渲染元素，否则销毁 | 始终渲染元素，通过 CSS 控制显示 |
| DOM 操作 | 动态添加/移除 DOM 元素 | 仅切换 display: none 样式 |
| 初始开销 | 低（条件为假时不渲染） | 高（无论条件如何都渲染） |
| 切换开销 | 高（涉及组件销毁/重建） | 低（仅修改 CSS 属性） |
| 组件生命周期 | 触发 created/mounted 等钩子函数 | 不触发生命周期钩子（始终存在） |
| 组合使用 | 支持 v-else-if 和 v-else | 无逻辑分支语法 |
- 控制方式不同
- v-show 通过添加 CSS
display: none隐藏元素，DOM 元素依然存在 - v-if 会直接添加或删除整个 DOM 元素
- v-show 通过添加 CSS
- 编译过程不同
- v-if 有局部编译/卸载过程，会销毁和重建内部事件监听及子组件
- v-show 仅进行简单的 CSS 切换
- 生命周期影响
- v-show 状态变化不会触发组件生命周期
- v-if 从 false 变为 true 会触发 beforeCreate、created、beforeMount、mounted 钩子；从 true 变为 false 会触发 beforeDestroy、destroyed
- 性能消耗
- v-if 切换开销更大
- v-show 初始渲染开销更大
三、实现原理分析
v-show 原理
无论初始条件如何，元素都会被渲染。其实现逻辑：
- 有 transition 时执行 transition 动画
- 无 transition 时直接设置 display 属性
// Vue 3 的 v-show 指令实现
export const vShow: ObjectDirective<VShowElement> = {
// 在元素挂载到 DOM 之前执行
beforeMount(el, { value }, { transition }) {
// 保存元素的原始 display 值，用于后续恢复
// 如果当前是隐藏状态（display: none），则保存空字符串
// 否则保存当前的 display 值
el._vod = el.style.display === 'none' ? '' : el.style.display
// 如果存在过渡动画且值为真（显示元素）
if (transition && value) {
// 执行过渡动画的进入前钩子
transition.beforeEnter(el)
} else {
// 否则直接设置元素的显示状态
setDisplay(el, value)
}
},
// ...其他生命周期处理（如 mounted, beforeUpdate, updated, beforeUnmount 等）
}v-if 原理
实现更为复杂，根据表达式值决定是否生成 DOM：
// Vue 3 的 v-if 指令转换器
export const transformIf = createStructuralDirectiveTransform(
// 匹配 v-if、v-else、v-else-if 指令的正则表达式
/^(if|else|else-if)$/,
// 转换函数，处理条件指令的 AST 节点
(node, dir, context) => {
// 调用 processIf 函数处理条件分支逻辑
return processIf(node, dir, context, (ifNode, branch, isRoot) => {
// 条件分支处理逻辑
// ifNode: 当前处理的 if 节点
// branch: 当前分支（if/else-if/else）
// isRoot: 是否为根节点
})
}
)四、使用场景建议
- 频繁切换场景 推荐使用 v-show
适用于需要快速响应的交互元素：
- Tab 切换内容
- 下拉菜单/折叠面板
- 频繁开闭的 Modal 弹窗
- 静态条件场景 推荐使用 v-if
适用于内容较重且不常变更的情况：
- 根据用户角色/权限加载的初始页面模块
- 登录状态相关的按钮/导航栏切换
- 大数据列表/图表等按需加载的组件
到此这篇关于v-show 和 v-if 的区别及使用场景的文章就介绍到这了,更多相关v-show 和 v-if 区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！