Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子。
生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。
1. Vue2的生命周期函数
Vue2中有4生命周期阶段，8个生命周期函数（又叫生命周期钩子）
（1）创建阶段：beforeCreate、created
（2）挂载阶段：beforeMount、mounted
（3）更新阶段：beforeUpdate、updated
（4）销毁阶段：beforeDestroy、destroyed
2. Vue3的生命周期函数
2.1 Vue3生命周期函数
（1）创建阶段：setup
（2）挂载阶段：onBeforeMount、onMounted
（3）更新阶段：onBeforeUpdate、onUpdated
（4）卸载阶段：onBeforeUnmount、onUnmounted
常用的钩子：onMounted、onUpdated、onBeforeUnmount
2.2 Vue3生命周期图示
2.3 onMounted
onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码。
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>2.4 onUpdated
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
// 文本内容应该与当前的 `count.value` 一致
console.log(document.getElementById('count').textContent)
})
</script>
<template>
<button id="count" @click="count++">{{ count }}</button>
</template>2.5 onBeforeUnmount
注册一个钩子，在组件实例被卸载之前调用。
function onBeforeUnmount(callback: () => void): void