vue3组合式API中的组件的生命周期

1. Vue3的生命周期及在setup中的生命周期钩子

1.1 生命周期概念

Vue官网：https://cn.vuejs.org/api/composition-api-lifecycle.html

在Vue3中，生命周期勾子函数被重新设计，以更好地支持组合式API的使用。

setup：在组件实例创建之前执行，用于组件的设置，例如响应式数据的创建、计算属性的设置、事件监听器的设置等。

以下是组件的生命周期的函数概念

1.2 案例

此时如果直接在控制台输出“scroll”的value，那么会输出<scroll>的对象还是scroll变量呢？

可以看到，将变量给返回出来了

那为什么拿不到<scroll>这个标签呢？

是因为他现在属于虚拟DOM中，还没有挂载到DOM中

所以就会拿不到节点信息

要是想拿到节点信息该怎么更改呢？

那么就不得不使用到onMouted函数了

用处就是让挂载结束，让虚拟DOM变成真实DOM

这样的话就成功的将DOM变成了真实的，也就自然的能将对象输出了

在里面也可以看到 属性都为true了

2.卸载生命周期

2.1 setTimeOut延时卸载

这边写入一句话“子组件”

在下方的函数位置中写入导入《onUnmounted》

作用是在子组建卸载后立即在控制台输出这句话

这边就给他设置一个延时器，当两秒后 “ show ” 的value会变成false，也就是说会消失

消失就代表着将生命周期卸载了

刚打开网页，“子组件”还显示着，并且控制台无东西

两秒后，“子组件”消失了，并且控制台多了一句话

也就是说此时的生命周期确实是被卸载了