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) // 访问 DOM
  this.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 = err
  return false // 阻止传播
}

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 差异

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('组件将卸载')
  })
}

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