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