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

原创已于 2023-09-26 10:14:19 修改 · 600 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-09-25 16:37:08 首次发布

Vue/React 专栏收录该内容

36 篇文章

订阅专栏

本文主要探讨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中触发情况也有差异。

文章目录

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。