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时)

🎯使用建议

1. 数据请求：created或mounted

   • SSR 用created，客户端用mounted

2. DOM 操作：mounted或updated

   • 注意updated可能多次触发

3. 清理资源：beforeUnmount

   • 定时器、事件监听、订阅等

4. 避免副作用：

   • 不要在updated中修改依赖数据
   • 避免在beforeUpdate中同步更改状态

🔄Vue 2 vs Vue 3 差异

💡组合式 API 中的生命周期

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

理解这些生命周期钩子有助于在正确的时机执行相应的逻辑，避免常见错误并优化性能。