vue2/vue3 v-if与v-show的区别 | 触发的生命周期

本文主要探讨Vue中v-if和v-show的区别及触发的生命周期。v-if通过diff和patch动态显示隐藏元素,v-show通过设置样式控制展示。在普通变量和组件方面,vue2和vue3在v-if和v-show触发生命周期上有不同表现,如v-if包裹子组件时,vue2和vue3行为基本一致,v-show在vue2和vue3中触发情况也有差异。

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

v-if 和 v-show 的区别

  • v-if="false"时,在该位置创建一个注释节点,用来标识元素在页面中的位置。在值发生改变的时候,通过diff,新旧组件进行patch,创建DOM节点,从而动态显示隐藏。
  • v-show="false"时,通过设置元素的样式,display:none来控制元素是否展示。
-v-ifv-show
本质操作DOM元素进行切换显示设置css样式进行切换显示
首次渲染开销较低较高
切换开销较高较低
适用场合不频繁切换频繁切换
对生命周期的影响会影响不会影响

触发的生命周期

普通变量

vue2/vue3行为一致,v-ifv-show都会导致父组件更新视图,所以会触发父组件的beforeUpdateupdated钩子函数

组件

vue3的生命周期函数beforeDestroydestroyed变成了beforeUnmountunmounted

v-if vue2/vue3行为基本一致

vue2中v-if包裹子组件

  • false转为true
    beforeUpdate -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父updated
  • true转为false
    beforeUpdate -> 子beforeDestroyed -> 子destroyed -> 父updated

vue3中v-if包裹子组件:与vue2相同,个别钩子函数名不同

  • false转为true
    beforeUpdate -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父updated
  • true 转为false
    beforeUpdate、子beforeUnmountunmounted、父updated
v-show

vue2中v-show包裹子组件

  • false转为true
    beforeUpdate -> 父updated
  • true转为false
    beforeUpdate->父updated

vue3中v-show包裹子组件:会触发子组件updated

  • false转为true
    beforeUpdate -> 子beforeUpdate->子updated->父updated
  • true转为false
    beforeUpdate -> 子beforeUpdate-> 子updated->父updated
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值