当前位置：首页 > news >正文

v-show 和 v-if 的区别及使用场景

news 2025/9/20 11:51:04

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 通过添加 CSS display: none 隐藏元素，DOM 元素依然存在
- v-if 会直接添加或删除整个 DOM 元素
编译过程不同
- 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: 是否为根节点})})