v-show和v-if的区别

v-show 和 v-if 的区别

v-show

v-show 通过 CSS 的 display 属性控制元素的显示与隐藏。无论条件是否成立，元素始终会被渲染到 DOM 中，只是通过 display: none 隐藏。适合频繁切换显示状态的场景，因为不会触发组件的销毁与重建。

v-if

v-if 是真正的条件渲染，会根据条件动态添加或移除 DOM 元素。当条件为 false 时，元素不会被渲染到 DOM 中。适合条件变化较少的场景，因为每次切换都会触发组件的销毁与重建，可能带来更高的性能开销。

主要区别

• 渲染机制: v-show 总是渲染，v-if 按需渲染。
• 初始加载: v-show 初始渲染开销较高（即使隐藏也会渲染），v-if 初始渲染开销较低（条件为 false 时不渲染）。
• 切换性能: v-show 切换时性能更好（仅修改 CSS），v-if 切换时性能较差（涉及 DOM 操作）。
• 适用场景: v-show 适合频繁切换，v-if 适合条件不频繁变化或需要减少初始负载的场景。

示例代码

<!-- v-show 示例 -->
<div v-show="isVisible">v-show 控制的内容</div>

<!-- v-if 示例 -->
<div v-if="isVisible">v-if 控制的内容</div>

总结

选择 v-show 还是 v-if 取决于具体需求：频繁切换用 v-show，条件稳定或需要优化初始加载用 v-if。