引言
今天我们来聊一聊 vue 中的生命周期，我们在日常 vue 开发过程中，vue自身就像是有生命一般从我们创造到执行结束后对其进行销毁，即vue 组件从创建到销毁的过程，其中官方提供了一系列的钩子函数
上图就是 vue 官方所提供的所有的生命周期的钩子函数，现在让我们来注意认识了解其作用。而我们上图所展示的都是vue3 中的钩子函数，相对之下vue2 同样由一系列这样的钩子函数
无论在vue2还是在vue3中生命周期都分为 创建、挂载、更新、销毁 四个阶段，以下是每个阶段的钩子函数及其作用：
1. 创建阶段（Initialization）
-
beforeCreate
触发时机：实例初始化后，数据观测（data）和事件配置（methods）之前。
用途：-
执行非响应式变量的初始化（如非
data中的变量）。 -
无法访问
data和methods。
-
-
created
触发时机：实例创建完成，数据观测和事件配置已初始化，但 DOM 未生成。
用途：-
发起异步请求（如 API 调用）。
-
操作非 DOM 相关的初始化逻辑。
-
2. 挂载阶段（DOM Insertion）
-
beforeMount and beforeMount
触发时机：模板编译完成，但尚未挂载到 DOM。
用途：- 极少使用，避免在此阶段修改数据（会触发重复更新）。
-
mounted and onMounted触发时机：实例挂载到 DOM 后触发，this.$el可访问。
用途：- 操作 DOM（如集成第三方库 D3.js）。
- 访问子组件或 DOM 元素（通过
ref）。
3. 更新阶段（Re-render）
-
**
beforeUpdate and onbeforeUpdate**
触发时机：数据变化导致 DOM 重新渲染前触发。
用途：- 获取更新前的 DOM 状态（如滚动位置）。
-
**
updated and onupdated**
触发时机：DOM 重新渲染后触发。
用途：- 执行依赖新 DOM 的操作（如调整元素尺寸）。
- 避免在此修改数据，可能导致无限循环。
4. 销毁阶段（Teardown）
-
**
beforeDestroy and onbeforeDestroy**
触发时机：实例销毁前触发，组件仍可用。
用途：- 清理定时器、取消网络请求或事件监听。
-
**
destroyed an on destroyed**
触发时机：实例销毁后触发，所有绑定和子组件已移除。
用途：- 执行最终清理操作（如释放非 Vue 资源）。
| Vue 2 钩子 | Vue 3 钩子 | 触发时机 |
|---|---|---|
beforeCreate | 无（由 setup() 替代） | 在 setup() 中执行替代逻辑。 |
created | 无（由 setup() 替代） | 在 setup() 中执行替代逻辑。 |
beforeMount | onBeforeMount | 挂载前触发。 |
mounted | onMounted | 挂载后触发。 |
beforeUpdate | onBeforeUpdate | 数据变化导致 DOM 更新前触发。 |
updated | onUpdated | DOM 更新后触发。 |
beforeDestroy | onBeforeUnmount | 组件卸载前触发。 |
destroyed | onUnmounted | 组件卸载后触发。 |
不同
vue3 新增：
| 无 | onErrorCaptured | 捕获子组件错误时触发（新增）。 |
|---|
setup() 替代 beforeCreate 和 created：
- 这两个钩子在 Composition API 中被
setup()替代，初始化逻辑直接写在setup()中。
面试考点
注意：父子组件之间的状态更新，会触发子组件的更新，但是不会触发父组件的更新，所以父组件的更新，需要手动触发。
- （类比洋葱模型） 父挂载前 子挂载前 子挂在后 父挂载后
