v-show 与 v-if 的区别

• 控制手段不同
• 编译过程不同
• 编译条件不同

控制手段： v-show 隐藏则是为该元素添加 css--display:none ， dom 元素依旧还在。 v-if 显示隐藏是将 dom 元素整个添加或删除

编译过程： v-if 切换有一个局部编译 / 卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show 只是简单的基于 css 切换

编译条件： v-if 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

• v-show  由 false 变为 true 的时候不会触发组件的生命周期

• v-if 由 false 变为 true 的时候，触发组件的 beforeCreate 、 create 、 beforeMount 、 mounted 钩子，由 true 变为 false 的时候触发组件的 beforeDestory 、 destoryed 方法

• v-if ：

  • 高切换开销 ：条件变化时触发组件销毁 / 重建（包括子组件和事件监听）。
  • 适用场景 ：条件很少改变（如权限控制、初始化渲染优化）。

• v-show ：

  • 高初始渲染开销 ：无论条件如何，元素始终会被渲染。
  • 低切换开销 ：仅切换 CSS 属性（适合高频切换，如标签页、折叠面板）。

场景	推荐指令	理由
高频切换（如 Tabs）	v-show	避免重复渲染开销，快速切换
条件稳定（如权限控制）	v-if	减少无效 DOM 节点，提升性能
需要触发过渡动画	v-if	组件的挂载 / 卸载可配合 <Transition> 动画
保留组件状态	v-show	隐藏时保持组件状态（如表单输入内容）