v-show 和 v-if 都是 Vue.js 中用于条件渲染的指令，但它们在实现原理、性能特性和使用场景上有显著区别。
核心区别对比
| 特性 | v-if | v-show |
|---|---|---|
| 实现原理 | 条件性地渲染/销毁 DOM 元素。 | 通过 CSS 控制 display: none 来切换元素的显示/隐藏。 |
| 初始渲染 | 只有当条件为 true 时，元素才会被创建并插入 DOM。 | 无论条件如何，元素都会被创建并插入 DOM。 |
| 切换开销 | 有开销。每次切换都需要创建/销毁 DOM 元素和对应的 Vue 组件实例（如果包含组件）。 | 开销极小。只是切换 CSS 的 display 属性。 |
| 首次渲染开销 | 条件为 false 时，无渲染开销。 | 无论条件如何，都有完整的渲染开销。 |
| 适用场景 | 切换不频繁，或初始状态常为 false 的元素。 | 切换非常频繁 的元素。 |
可与 v-else 配合 | ✅ 可以（v-else 必须紧跟在 v-if 或 v-else-if 后）。 | ❌ 不可以。 |
可与 v-for 同时使用 | ⚠️ 不推荐（有性能问题，见前文）。 | ✅ 可以（因为 v-show 本质是样式控制）。 |
作用于 <template> | ✅ 可以。 | ❌ 不可以（v-show 不能用于 <template>，因为它需要操作 DOM 样式）。 |
详细解释
v-if：真正的“条件渲染”
- 工作方式：
- 当条件为
true时，元素被创建并添加到 DOM中。 - 当条件为
false时，元素被完全销毁并从 DOM 中移除。 - 如果元素内部包含 Vue 组件，该组件的生命周期钩子（如
created、mounted、beforeDestroy）会随着条件切换而被调用。 - 当
isVisible为false时，整个<div>及其子元素（包括ChildComponent）都不在 DOM 中，ChildComponent的beforeDestroy钩子会被触发。
- 当条件为
v-show：简单的“显示/隐藏”
- 工作方式：
- 元素始终存在于 DOM 中。
- Vue 通过动态添加或移除内联样式
style="display: none;"来控制元素的可见性。 - 切换时，不会触发组件的销毁和创建，因此生命周期钩子不会被重复调用。
- 无论
isVisible如何变化，<div>和ChildComponent实例都一直存在，只是视觉上隐藏。
使用场景
推荐使用 v-if 的场景
- 条件在运行时很少改变：
- 例如：用户登录后才显示的“欢迎信息”或“个人中心”面板。
- 一旦登录，状态基本不变，无需频繁切换。
- 初始状态通常为
false：- 例如：模态框（Modal）、侧边栏、错误提示等。
- 页面加载时这些元素不需要显示，使用
v-if可以避免不必要的渲染开销。
- 包含复杂组件或大量 DOM 元素：
- 如果隐藏的元素内部结构复杂，销毁它可以节省内存和性能。
- 需要配合
v-else/v-else-if：- 实现互斥的条件分支逻辑。
推荐使用 v-show 的场景
- 需要频繁切换显示/隐藏：
- 例如：切换标签页（Tabs）、折叠面板（Accordion）、工具栏按钮的悬停效果等。
- 频繁的 DOM 创建/销毁成本远高于 CSS 切换。
- 对性能要求高，且切换非常快：
v-show的切换是瞬时的，没有组件重建的延迟。
- 元素本身渲染开销小：
- 如果元素简单，即使一直存在于 DOM 中，也不会造成明显负担。
总结
v-if是“惰性的”：它确保在条件为false时，内部的元素和组件完全不存在，适合不常切换的场景。v-show是“激进的”：它一开始就渲染好一切，通过 CSS 控制显示，适合频繁切换的场景。
一句话回答：v-if 通过添加/移除 DOM实现条件渲染，适合不频繁切换的场景；v-show 通过CSS 的 display 属性控制显示/隐藏，适合频繁切换的场景。选择的关键在于切换频率和渲染开销的权衡。
THE END
