vue中v-if和v-show的渲染区别

本文详细探讨了Vue中v-if和v-show的差异,包括它们在DOM操作、性能消耗以及编译过程上的不同。v-if适用于元素不频繁切换的情况,首次渲染速度快;v-show则适合元素显示状态频繁变化的场景,切换效率高。在实际项目中,错误地使用v-show导致数据无法正确循环显示,改用v-if后问题解决。因此,理解并恰当使用这两个指令对于优化Vue应用性能至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念

v-if:条件性渲染一块内容

v-show:渲染元素保留在DOM中,切换元素CSS调整显示

区别

1.本质区别

v-if:动态向DOM树增添/删除元素

v-show:修改CSS标签为display:none,控制隐藏

2.主要区别

v-if会不停销毁/创建

v-show是一次性渲染

所以性能方面,v-if有更高的切换消耗,v-show初始渲染消耗更高

综上,v-show更适合日常使用,避免不必要的操作、减少数据的渲染

3.编译区别

v-if切换时存在局部编译/销毁的过程,切换时适合监听事件和子组件

v-show会编译所有的需要数据

使用场景

v-if:元素进入页面后不会被改变显示状态时使用(隐藏元素时不用渲染此DOM,有效提升页面加载速度)

v-show:进入页面后此元素会频繁改变显示状态(例如有button按钮控制示隐藏某块区域时,只会在初次加载时渲染此DOM,后期显示隐藏不会频繁操作DOM,对性能影响小于v-if)

实际操作遇到的问题

写这篇的时候是因为遇到了多人合作项目时用到了v-show和v-if的相关操作

在一个页面使用两种样式的组件显示时,由于接口都是一个,传入的参不一样,返回值listData不一样,在使用v-for循环组件发现只能循环出最后一组参数的值,listData的值可以显示,但是无法循环到页面上。

后来发现同事在显示组件时使用的v-show导致的直接渲染的时最后一组数据,修改为v-if后显示正常,可以在切换路由的时候进行组件切换、数值传参的修改。

### Vue.js 中 `v-if` `v-show` 指令详解 #### 条件渲染指令简介 Vue.js 提供了两种主要的条件渲染指令:`v-if` `v-show`。这两种指令都允许开发者基于表达式的真假来控制 DOM 元素的显示否,但在实现方式性能表现上有显著差异。 #### `v-if` 指令的工作原理 当使用 `v-if` 指令时,如果绑定的表达式返回 false 或者其他假值,则对应的元素不会被渲染到页面中;反之则会正常渲染该元素[^2]。这意味着每次切换状态都会触发完整的组件销毁重建过程,在首次加载或数据变化较情况下适合采用此方法。 ```html <template> <div> <!-- 当 'show' 变量为真时才会渲染 h1 --> <h1 v-if="show">Hello Vue.js!</h1> <button @click="toggleShow">Toggle Show</button> </div> </template> <script> export default { data() { return { show: true, }; }, methods: { toggleShow() { this.show = !this.show; } } }; </script> ``` #### `v-show` 指令的应用场景 相比之下,`v-show` 不会影响 HTML 结构本身的存在否,而是通过 CSS 属性 `display:none;` 控制可见性。因此对于频繁切换显示/隐藏需求而言更为高效,因为不需要重新编译模板并创建新的节点实例[^4]。 ```html <!-- 使用 v-show 实现相同效果 --> <h1 v-show="show">Hello Vue.js!</h1> ``` #### 性能对比分析 - **初次渲染**:`v-if` 需要更多计算资源完成初始化操作; - **动态更新**: 对于经常变动的状态推荐使用 `v-show` ,因为它只需改变样式属性即可达到目的而不必重绘整个DOM树结构; - **内存占用**: 如果元素长时间处于不可见状态,`v-if` 更加节省空间,因为它完全移除了不必要的HTML片段[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值