vue3中用v-show触发的生命周期钩子以及注意事项

有以下结构,通过show真假值对组件life进行显示隐藏

<template>
  <button @click="show = !show">隐藏</button>
  <life v-show="show" />
</template>

 这是life组件的生命周期

onBeforeMount(() => {
  console.log('onBeforeMount');
})
onMounted(() => {
  console.log('onMounted');
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
})
onUpdated(() => {
  console.log('onUpdated');
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount');
})
onUnmounted(() => {
  console.log('onUnmounted');
})

如果通过v-show那么触发的是更新函数

但是有前提.组件内部必须得有根标签

 

 加上跟标签就行了

 

---

---

v-if的话没啥好说的,就是卸载挂载

 总结:用v-show显示隐藏一个组件,会触发更新钩子,但是必须得要根标签,不然无法隐藏