v-if 和 v-show 的区别
v-if="false"
时,在该位置创建一个注释节点,用来标识元素在页面中的位置。在值发生改变的时候,通过diff,新旧组件进行patch,创建DOM节点,从而动态显示隐藏。v-show="false"
时,通过设置元素的样式,display:none
来控制元素是否展示。
- | v-if | v-show |
---|---|---|
本质 | 操作DOM元素进行切换显示 | 设置css样式进行切换显示 |
首次渲染开销 | 较低 | 较高 |
切换开销 | 较高 | 较低 |
适用场合 | 不频繁切换 | 频繁切换 |
对生命周期的影响 | 会影响 | 不会影响 |
触发的生命周期
普通变量
vue2/vue3行为一致,v-if
和v-show
都会导致父组件更新视图,所以会触发父组件的beforeUpdate
和updated
钩子函数
组件
vue3的生命周期函数beforeDestroy
与destroyed
变成了beforeUnmount
与unmounted
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
、子beforeUnmount
、unmounted
、父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