区别
| 指令/属性 | 行为本质 | 是否占据空间 | DOM 状态 | 事件响应 |
|---|---|---|---|---|
| v-if | 条件为 false 时销毁 DOM 元素，条件为 true 时重新创建 | ❌ 不占据 | 元素从 DOM 移除 | ❌ 无 |
| v-show | 通过 CSS display: none 切换显示/隐藏 | ❌ 不占据 | 元素保留在 DOM | ❌ 无 |
| display: none | 元素完全隐藏且不占据空间，但仍存在于 DOM 中 | ❌ 不占据 | 元素保留在 DOM | ❌ 无 |
| visibility: hidden | 元素不可见但保留布局空间，仍存在于 DOM 中 | ✅ 占据 | 元素保留在 DOM | ✅ 有 |
使用场景
| 需求 | 推荐方案 | 原因 |
|---|---|---|
| 条件不频繁变化 | v-if 或 display: none | 减少初始 DOM 节点，节省资源 |
| 条件频繁切换 | v-show | 避免重复渲染 DOM，切换更流畅 |
| 保留布局空间 | visibility: hidden | 隐藏元素但保留空间，避免布局抖动 |
| 需要事件穿透 | visibility: hidden + 事件监听 | 元素不可见但可交互（需额外处理事件逻辑） |
v-if 和 display: none 在"隐藏且不占据空间"的行为上相似，但 v-if 更彻底（销毁 DOM）。
v-show 实际使用 display: none，与 visibility: hidden 无关。
根据具体场景（是否频繁切换、是否需要保留空间）选择合适的方案，而非简单等价对应