vue组件实例在创建时经历的一系列初始化步骤，在此过程中，它也会运行被称为生命周期钩子的函数，让开发者可以在特定阶段运行自己的代码。

onMounted()

注册一个回调函数，在组件挂载完成后执行。组件在一下情况会被视为挂载完成：

其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)；
其自身的 DOM 树已经创建完成并插入了父容器中。

使用方法：

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref()

onMounted(() => {
    count.value ++;
})

</script>

使用场景：

（1）数据请求：确保组件完全挂载后再进行数据的请求，防止因数据请求事件导致的二次渲染带来的性能损耗；

（2）处理dom元素：可以使用原生API对dom元素进行操作；

（3）优化初始化效率：可以将一些初始化代码延迟到挂载后再执行，提升初始化效率。

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。注意：父组件的更新钩子将在其子组件的更新钩子之后调用。

dom的更新不是同步的，如果需要在某个特定的状态更改后访问更新后的 DOM，可以使用 nextTick() 。

<template>
    <button id="count" @click="count++">{{ count }}</button>
</template>

<script setup lang="ts">
import { ref, onUpdated } from 'vue';

const count = ref(0)

onUpdated(() => {
    // 文本内容应该与当前的 `count.value` 一致
    console.log(document.getElementById('count')?.textContent)
})
</script>

onUnmounted()

注册一个回调函数，在组件实例被卸载以后调用。以下情况被视为已卸载：

其所有子组件都已经卸载；
所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子里面清理一些不再需要的功能，如计时器、dom事件的监听或者与服务器的连接。

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

let intervalId: number
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>