vue中的生命周期钩子-平芜编程栈

vue中的生命周期钩子

Vue 组件的生命周期钩子分为以下几个阶段，以下是对 Vue 3 生命周期的详细说明（Vue 2 略有差异）：

📌创建阶段（初始化）

1.`beforeCreate`

调用时机：实例初始化后，数据观测和事件/配置之前
特点：
- 无法访问data、computed、methods等
- 常用于插件初始化
示例：

beforeCreate(){console.log(this.message)// undefined}

2.`created`

调用时机：实例创建完成
特点：
- 可以访问data、methods、computed
- 无法访问 DOM（模板未挂载）
- 常用于 API 请求、数据初始化
示例：

created(){console.log(this.message)// 可访问this.fetchData()}

📌挂载阶段（DOM 渲染）

3.`beforeMount`

调用时机：模板编译完成，但未挂载到 DOM
特点：
- 模板已编译为渲染函数
- 首次render函数即将被调用
示例：

beforeMount(){console.log('DOM 即将渲染')}

4.`mounted`

调用时机：实例已挂载到 DOM
特点：
- 可以访问 DOM 元素
- 子组件不一定全部挂载完成
- 常用于 DOM 操作、第三方库初始化
示例：

mounted(){console.log(this.$el)// 访问 DOMthis.initChart()// 初始化图表库}

📌更新阶段（响应式数据变化）

5.`beforeUpdate`

调用时机：数据改变后，DOM 重新渲染前
特点：
- 可以获取更新前的 DOM 状态
- 适合移除事件监听器等操作
示例：

beforeUpdate(){console.log('数据更新前')}

6.`updated`

调用时机：DOM 已重新渲染完成
特点：
- 可以执行依赖新 DOM 的操作
- 避免在此修改状态（可能导致无限循环）
示例：

updated(){console.log('DOM 更新完成')// 谨慎操作，可能触发再次更新}

📌卸载阶段（组件销毁）

7.`beforeUnmount`（Vue 3）/`beforeDestroy`（Vue 2）

调用时机：实例销毁前
特点：
- 实例仍完全可用
- 适合清理定时器、取消订阅、移除事件监听
示例：

beforeUnmount(){clearInterval(this.timer)eventBus.off('event',this.handler)}

8.`unmounted`（Vue 3）/`destroyed`（Vue 2）

调用时机：实例销毁后
特点：
- 所有绑定已解除，子实例已销毁
- 无法再访问实例
示例：

unmounted(){console.log('组件已销毁')}

📌其他特殊钩子

9.`errorCaptured`

调用时机：捕获后代组件错误时
特点：
- 可以返回false阻止错误继续向上传播
示例：

errorCaptured(err,instance,info){this.error=errreturnfalse// 阻止传播}

10.`renderTracked`（Vue 3 开发模式）

调用时机：响应式依赖被跟踪时
用途：调试响应式依赖

11.`renderTriggered`（Vue 3 开发模式）

调用时机：响应式依赖触发重新渲染时
用途：调试重新渲染原因

12.`activated`/`deactivated`

调用时机：<keep-alive>缓存组件激活/停用时
示例：

activated(){this.startPolling()// 恢复轮询},deactivated(){this.stopPolling()// 停止轮询}

📊生命周期流程图

创建阶段: new Vue() → beforeCreate → 响应式初始化 → created 挂载阶段: created → beforeMount → 编译模板 → 创建VDOM → 挂载DOM → mounted 更新阶段: 数据变化 → beforeUpdate → 重新渲染 → updated 卸载阶段: beforeUnmount → 卸载组件 → unmounted 缓存组件: deactivated → activated (当使用keep-alive时)

🎯使用建议

数据请求：created或mounted
- SSR 用created，客户端用mounted
DOM 操作：mounted或updated
- 注意updated可能多次触发
清理资源：beforeUnmount
- 定时器、事件监听、订阅等
避免副作用：
- 不要在updated中修改依赖数据
- 避免在beforeUpdate中同步更改状态

🔄Vue 2 vs Vue 3 差异

Vue 2	Vue 3	说明
`beforeDestroy`	`beforeUnmount`	更名
`destroyed`	`unmounted`	更名
-	`renderTracked`	新增调试钩子
-	`renderTriggered`	新增调试钩子

💡组合式 API 中的生命周期

import{onMounted,onUnmounted}from'vue'setup(){// 对应 created 和 beforeCreate 的代码直接写在 setup 中onMounted(()=>{console.log('组件已挂载')})onUnmounted(()=>{console.log('组件将卸载')})}