原创2026/3/5大约 2 分钟
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码
<template>
<div></div>
</template>
<script setup lang="ts">
//setup取代beforeCreate和created
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onErrorCaptured,
onRenderTracked,
onRenderTriggered,
onActivated,
onDeactivated,
} from 'vue'
onBeforeMount(() => {
//在挂载前被调用
})
onMounted(() => {
//挂载完成后调用
})
onBeforeUpdate(() => {
//数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上
})
onUpdated(() => {
//数据更新后调用，此时内存数据已经修改，页面数据也已经更新
})
onBeforeUnmount(() => {
//组件卸载前调用
})
onUnmounted(() => {
//卸载组件实例后调用
})
onErrorCaptured(() => {
//每当事件处理程序或生命周期钩子抛出错误时调用
})
onRenderTracked(() => {
//状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象
})
onRenderTriggered(() => {
//状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会追踪发生改变的数据，同样返回一个event对象
})
onActivated(() => {
//与keep-alive一起使用，当keep-alive包裹的组件激活时调用
})
onDeactivated(() => {
//与keep-alive一起使用，当keep-alive包裹的组件停用时调用
})
</script>生命周期应用
组件的生命周期会随着我们对Vue的了解越多，也会越来越重要，这里我们先讲两个常用的应用常见：
- 通过
ref获取元素DOM结构 - 模拟网络请求渲染数据
提示
获取元素DOM结构要在页面加载完成后进行
网络请求要在页面加载完成之前进行（onMounted或onMounted之前的生命周期）
至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。