v-if、v-show、display: none、visibility: hidden区别

区别

指令/属性	行为本质	是否占据空间	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 无关。

根据具体场景（是否频繁切换、是否需要保留空间）选择合适的方案，而非简单等价对应