v-show和v-if的区别

v-show和v-if的区别主要有:

  1. 控制显示隐藏的本质不同:v-show控制显示隐藏的本质是操作该元素的css--display:block/none,元素隐藏时依旧还在;而v-if控制显示隐藏的本质是操作dom,动态的创建或者删除元素节点,值为false时即为在dom树上删除该元素节点。
  2. 编译过程不同:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;而v-show只是简单的基于css切换。
  3. 编译条件不同:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时不做操作,直到为真才渲染;而v-show都会编译,初始值为false,只是将display设为none,但它也编译了。
  4. 性能消耗不同:v-if有更高的切换消耗,更适合用于条件变化不大时使用;而v-show有更高的初始渲染消耗,适合于频繁的切换。
  5. 配套使用不同:v-if可以搭配template使用,而v-show不行。

综上所述,v-show和v-if的区别主要表现在控制显示隐藏的本质、编译过程、编译条件、性能消耗和配套使用上。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值