Vue.js 中 v-show 与 v-if 深度对比：差异、原理及应用场景

在 Vue.js 的开发过程中，条件性地控制 DOM 元素的显示与隐藏是一项极为常见的操作。v-show和v-if作为 Vue.js 提供的两个重要指令，都能实现这一功能，但它们在使用方式、底层原理以及适用场景上存在显著差异。深入理解这些差异，对于编写高效、优质的 Vue.js 代码至关重要。本文将全面剖析

v-show和v-if，帮助开发者在实际项目中做出更恰当的选择。​

一、基本使用方式对比​

（一）v-show 的使用​

v-show指令通过绑定一个布尔值表达式来控制元素的显示状态。无论初始表达式的值是true还是false，元素都会被渲染到 DOM 树中，只是通过修改 CSS 的display属性来决定元素是否在页面上可见。例如：

当isVisible为true时，

元素正常显示；当isVisible为false时，

元素的style属性会被设置为display:none，从而在页面上隐藏，但元素本身依然存在于 DOM 树中。​

（二）v-if 的使用​

v-if同样绑定一个表达式，不过它是根据表达式的真假来决定是否将元素渲染到 DOM 树中。当表达式的值为true时，元素及其子元素会被正常创建并插入到 DOM 树；当表达式的值为false时，元素不会出现在 DOM 树中。示例如下：

在这个例子中，当isVisible为false时，

元素及其内部的所有内容都不会被渲染，就好像该元素在模板中不存在一样。当isVisible变为true时，Vue.js 会重新创建该

元素并将其插入到 DOM 树中合适的位置。​

二、底层原理剖析​

（一）v-show 的原理​

Vue.js 在解析模板时，遇到v-show指令会在元素的style属性中动态添加或移除display:none样式。在初始渲染阶段，Vue.js 计算v-show绑定的表达式的值，如果为false，则直接在元素的style属性中添加display:none；如果为true，则保持style属性中display的默认值（取决于元素的类型，如block、inline等）。​

当绑定的数据发生变化时，Vue.js 的响应式系统会检测到变化，重新计算表达式的值。如果新值与旧值不同，就会相应地更新元素style属性中的display值。由于只是修改 CSS 样式，不涉及 DOM 元素的创建和销毁，所以v-show在频繁切换显示状态时性能表现较好。​

（二）v-if 的原理​

在初始渲染时，Vue.js 会计算v-if绑定的表达式。如果表达式为true，则正常创建元素及其子元素，并将它们插入到 DOM 树中；如果为false，则跳过元素的创建过程。​

当数据发生变化导致表达式的值改变时，Vue.js 会根据新的值重新决定元素的渲染与否。如果新值为true且之前元素未被渲染，Vue.js 会创建元素并插入到 DOM 树中；如果新值为false且之前元素已被渲染，Vue.js 会从 DOM 树中移除该元素及其子元素。这种创建和销毁 DOM 元素的操作在条件频繁变化时会带来较大的性能开销。​

三、性能表现对比​

（一）频繁切换显示状态时​

如前文的示例代码所示，当模拟频繁点击按钮切换元素显示状态时，使用v-show的组件性能更优。因为v-show仅修改 CSS 样式，而v-if需要不断创建和销毁 DOM 元素。在浏览器的性能分析工具中，可以明显观察到使用v-if的组件在频繁操作时，CPU 占用率大幅上升，帧率下降，页面出现卡顿现象；而使用v-show的组件 CPU 占用率相对稳定，帧率保持较高，页面切换流畅。​

（二）初始渲染时​

在初始渲染方面，v-show具有一定优势。因为v-show的元素无论条件如何都会被渲染到 DOM 树中，只是通过 CSS 控制显示，整个过程没有额外的条件判断和 DOM 创建或移除的延迟。而v-if需要先计算表达式的值，然后根据结果决定是否创建元素，特别是当条件判断逻辑复杂时，会增加初始渲染的时间。通过性能测试工具，通常可以发现使用v-if的页面首次内容绘制时间（FCP）会比使用v-show的页面稍长。​

四、适用场景分析​

（一）v-show 的适用场景​

1. 频繁切换显示状态的元素：例如网页中的导航菜单，用户可能会多次点击展开和收起。使用v-show可以避免频繁创建和销毁 DOM 元素带来的性能问题，保证菜单切换的流畅性。​

1. 对初始渲染速度要求较高且后续可能切换显示状态的元素：一些页面加载后立即需要展示或隐藏的提示信息，使用v-show能确保页面快速完成初始渲染，后续根据用户操作切换显示状态时也能保持较好的性能。​

（二）v-if 的适用场景​

1. 运行时条件很少改变的情况：比如根据用户的权限来决定是否显示某个特定的功能按钮，这种权限在用户登录期间一般不会频繁变化。使用v-if可以在初始渲染时就准确控制 DOM 结构，避免不必要的元素渲染。​

1. 复杂条件分支判断：当需要根据多个条件进行复杂的判断来决定元素的显示时，v-if结合v-else-if和v-else能清晰地表达条件逻辑。例如在一个电商网站中，根据用户的会员等级、购买历史等多个条件来显示不同的促销信息。​

五、总结​

v-show和v-if虽然都能实现元素的条件显示与隐藏，但它们在原理、性能和适用场景上各有特点。v-show侧重于通过 CSS 样式的切换来控制元素显示，适合频繁切换和对初始渲染速度要求高的场景；v-if则是真正的条件渲染，根据条件创建或销毁 DOM 元素，适用于条件很少改变和复杂条件判断的情况。在实际的 Vue.js 项目开发中，开发者应根据具体的业务需求和性能考量，准确选择使用v-show或v-if，以打造高效、流畅且易于维护的前端应用程序。

深入理解这两个指令的差异，将为提升 Vue.js 开发技能和项目质量提供有力支持。

希望这篇博客对你有所帮助，如果有任何问题和建议欢迎留言讨论