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

相关推荐
foxhuli22933 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript