生命周期函数
每个 Vue 组件实例在创建时或销毁时的一系列回调事件，可以在相关事件触发时调用自定义函数。
常用生命周期函数
| 函数名 | 说明 |
|---|---|
| created() | 在绑定元素的属性前调用 |
| beforeMount() | 在绑定元素被挂载前调用 |
| mounted() | 在绑定元素的父组件及自身的所有子节点都挂载完成后调用 |
| beforeUpdate() | 在绑定元素的父组件及自身的所有子节点都更新后调用 |
| updated() | 在绑定元素的父组件更新前调用 |
| beforeUnmount() | 在绑定元素的父组件卸载前调用 |
| unmounted() | 在绑定元素的父组件卸载后调用 |
常用生命周期函数的参数
| 参数 | 说明 |
|---|---|
| el | 指令所绑定的元素，可以直接用于操作 DOM 元素 |
| binding | 一个对象，包含多个属性，用于接收属性的参数值 |
| vnode | 代表绑定元素底层的虚拟节点 |
| prevVnode | 之前页面渲染中指令所绑定元素的虚拟节点 |
注册周期钩子
举例来说，onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：
vue
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。所有生命周期钩子的完整参考及其用法请参考 API 索引。
当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。例如，请不要这样做：
js
setTimeout(() => {
onMounted(() => {
// 异步注册时当前组件实例已丢失
// 这将不会正常工作
})
}, 100)注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的词法上下文中。onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。
生命周期图示
下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。
有关所有生命周期钩子及其各自用例的详细信息，请参考生命周期钩子 API 索引。