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

v-if 和 v-show 的区别

• v-if="false"时，在该位置创建一个注释节点，用来标识元素在页面中的位置。在值发生改变的时候，通过diff，新旧组件进行patch，创建DOM节点，从而动态显示隐藏。
• v-show="false"时，通过设置元素的样式，display:none来控制元素是否展示。

-	v-if	v-show
本质	操作DOM元素进行切换显示	设置css样式进行切换显示
首次渲染开销	较低	较高
切换开销	较高	较低
适用场合	不频繁切换	频繁切换
对生命周期的影响	会影响	不会影响

• 当v-if指令附属于普通元素时，v-if指令状态变化会使得父组件的dom发生变化，父组件将会更新视图，所以会触发父组件的beforeUpdate和updated钩子函数。
• 当v-if指令令附属于组件时，v-if指令状态变化对父组件的影响和上一条一致，但是对于本身组件的生命周期的影响是不一样的。
  • v-if从false切换到true时，会触发beforeCreate，created，beforeMount，mounted钩子。
  • v-if从true切换到false时，会触发beforeDestroy和destroyed钩子函数。

触发的生命周期

普通变量

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