【Vue】v-if和v-show的区别

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–核心区别
• 三–使用场景​
• 四–性能对比
• 五–总结​

二. 核心区别

之前将css的显示隐藏的方式的时候，就已经提到过v-show和v-if了。忘记了的可以再回头去复习复习。

（2.1）渲染机制​​：

• v-if： 真正的条件渲染，当条件为false时，组件也不会挂载到DOM中，组件会被销毁，对应的事件监听器和子组件也会被移除，当条件为true时，重新把组件挂载到DOM中
• v-show： 不管是true还是false，组件都会渲染到DOM中，只是通过CSS的display:none属性，隐藏和显示组件
  （2.2）初始渲染开销​​：
• v-if： 属性为false时不渲染组件，无渲染开销。当属性为true时触发渲染，有渲染开销
• v-show： 不管属性时false还是true，组件都会渲染，只是给不给用户看的问题。都有渲染开销
  （2.3）切换开销​​：
• v-if： 切换渲染条件，组件会经历销毁和重建，即会触发重排，开销高(频繁切换，不建议使用)
• v-show： 切换渲染条件，只是修改css的样式，不会触发销毁和重建，一般触发重绘，开销低(适合频繁切换的场景)
  （2.4）编译过程​​：
• v-if： 支持 template 标签，且可以与 v-else、v-else-if 配合使用。
• v-show： 不支持 template 标签，也不能与其他指令组合使用。
  

三. 使用场景

• 用 v-if​​：
  • 当条件在运行时​​很少改变​​，或者需要完全销毁/重建组件（例如权限控制、动态表单字段）。
  • 需要减少​​初始渲染开销​​的场景（例如初始隐藏的复杂组件）。
• 用 v-show​​：
  • 当需要​​频繁切换显示/隐藏​​（例如选项卡切换、折叠面板）。
  • 元素/组件切换时的状态需要保留（例如表单输入框的缓存值）。

四. 性能对比

• 首次加载​​：v-if 更高效（条件为 false 时不渲染）。
• 频繁切换​​：v-show 更高效（避免重复销毁/重建）。

五. 总结

特性	v-if	v-show
DOM 存在性​	条件为false，不存在	始终存在，仅隐藏
​​初始渲染开销​​	低(false时不渲染，无开销)	高(始终渲染)
​​切换开销​​	高(触发重排)	低(触发重绘)
​适用场景​​	条件不频繁变化	条件频繁变化

一句话回答​​：
v-if 通过销毁/重建 DOM 控制显示，适合不频繁切换的场景；v-show 通过 CSS 隐藏元素，适合频繁切换的场景。