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

相关推荐
南岸月明2 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD15 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip20 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济25 分钟前
后端程序员的CSS复习
前端
Enddme28 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员30 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin40 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长1 小时前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas