【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 隐藏元素,适合频繁切换的场景。

相关推荐
cxr8281 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全2 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊2 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan4 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿4 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊5 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪5 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅5 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防6 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump6 小时前
前端部署工具 PinMe
运维·前端·开源