Vue3学习笔记（生命周期）_vue3 onmount

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

一.注册生命周期钩子

<script setup>
import { onMounted } from 'vue'
 
onMounted(() => {
  console.log(`我是组件，我完成渲染啦！`)
})
</script>

Vue3在生命周期这一块做了一些改动，与Vue2的意思不经相同，但单词变了。分别是

1.创建组件后

setup()

2.组件挂载完成后

onMountent（）  

3.组件更新后

onUpdata（）

4.组件销毁后

onUnmountend（）

beforeCreate  -> setup() 开始创建组件之前，创建的是data和method

created       -> setup()

beforeMount   -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted       -> onMounted 组件挂载完成后执行的函数

beforeUpdate  -> onBeforeUpdate 组件更新之前执行的函数。

updated       -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed     -> onUnmounted 组件卸载之前执行的函数。

二.此外还增加了几个生命周期钩子

1.组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onBeforeUpdate()

2.在捕获了后代组件传递的错误时调用。

onErrorCaptured()

3.当响应式依赖的变更触发了组件渲染时调用。

onRenderTriggered() 

4.若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

onActivated()

5.若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

onDeactivated()