Vue中v-show与v-if的区别

1、渲染机制不同

  • v-if
    • 惰性渲染: 初始化条件为false不会渲染元素到DOM。
    • 切换时: 条件变化会销毁/重建组件/元素(触发生命周期钩子)。
    • 支持template 标签和v-else/v-else-if
  • v-show
    • 始终渲染: 无论条件如何,元素始终存在于DOM中。
    • 切换时: 仅通过 CSS 的display: none控制显示/隐藏(无生命周期变化)。

2、性能对比

  • v-if 切换成本高
    适合不频繁切换的场景(如初始化渲染决定是否显示)。
js 复制代码
<div v-if="isExpensive">耗性能的内容(如复杂组件)</div>
  • v-show 初始化成本高
    适合频繁切换的场景(如选项卡切换)。
js 复制代码
<div v-show="isActive">频繁切换的内容</div>

3、生命周期影响

  • v-if
    条件为true 时触发mounted 等钩子;为false 时触发unmounted
  • v-show
    无论条件如何,组件的生命周期不会重新触发

4、使用场景示例

场景 推荐指令 原因
初始加载时决定是否显示 v-if 避免渲染不需要的DOM节点
频繁切换显示状态(如菜单) v-show 避免重复销毁/重建的性能损耗
涉及高开销组件 v-if 减少不必要的初始化开销

总结表格

|特性 |v-if |v-show |

|初始渲染 |条件为真才渲染|总是渲染|

|切换开销 |高(销毁/重建)|低(CSS切换)|

|生命周期 |触发钩子|不触发|

|DOM 存在性 |条件为假时移除|始终存在(隐藏)|

|适用场景|不频繁切换|频繁切换|

简单记忆:

  • 需要减少初始负载 → v-if
  • 需要快速切换显示 → v-show
相关推荐
西陵7 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld14 分钟前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记24 分钟前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷2 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离2 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw2 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip2 小时前
http缓存
前端·javascript
我不只是切图仔3 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端