个人博客：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 隐藏元素，适合频繁切换的场景。