Vue 生命周期 - 技术栈

Vue 组件的生命周期分为创建、挂载、更新和销毁四个阶段，每个阶段包含特定的钩子函数（生命周期钩子）。这些钩子允许开发者在不同阶段执行自定义逻辑。

🌟 完整生命周期流程图

复制代码

创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段
  │          │          │          │
beforeCreate  beforeMount beforeUpdate beforeUnmount
  │          │          │          │
  created     mounted     updated     unmounted

生命周期钩子详解

1. 创建阶段 (Initialization)

beforeCreate
- 触发时机：实例初始化后，数据观测/事件配置前
- 访问能力 ：无法访问 data、methods、computed
- 使用场景 ：
  - 初始化非响应式变量
  - 注入插件（如全局事件总线）
  javascript 复制代码
```
beforeCreate() {
  this.$bus = new Vue() // 初始化事件总线
}
```
created
- 触发时机：实例创建完成，数据观测/属性计算完成
- 访问能力 ：可访问 data、methods、computed
- DOM 状态 ：未挂载，$el 不可用
- 使用场景 ：
  - 异步数据请求（API 调用）
  - 初始化组件状态
  javascript 复制代码
```
created() {
  axios.get('/api/data').then(res => {
    this.items = res.data
  })
}
```

2. 挂载阶段 (Mounting)

beforeMount
- 触发时机：模板编译完成，首次渲染前
- DOM 状态：虚拟 DOM 已创建，但未替换真实 DOM
- 使用场景 ：
  - 最后时刻的数据修改（不会触发重新渲染）
  javascript 复制代码
```
beforeMount() {
  this.loading = true // 显示加载状态
}
```
mounted
- 触发时机：实例挂载到 DOM 后
- DOM 状态：可访问真实 DOM 元素
- 使用场景 ：
  - DOM 操作（初始化第三方库）
  - 事件监听器注册
  javascript 复制代码
```
mounted() {
  this.chart = echarts.init(this.$refs.chart)
  window.addEventListener('resize', this.handleResize)
}
```

3. 更新阶段 (Updating)

beforeUpdate
- 触发时机：数据变化后，虚拟 DOM 重新渲染前
- DOM 状态：当前 DOM 仍为旧状态
- 使用场景 ：
  - 获取更新前的 DOM 状态（如滚动位置）
  javascript 复制代码
```
beforeUpdate() {
  this.oldScrollTop = this.$refs.list.scrollTop
}
```
updated
- 触发时机：虚拟 DOM 重新渲染并应用后
- DOM 状态：DOM 已更新到最新状态
- 使用场景 ：
  - 依赖新 DOM 的操作（如调整图表尺寸）
  - 注意：避免在此修改状态，可能导致无限循环
  javascript 复制代码
```
updated() {
  this.chart.resize() // 图表适配新尺寸
}
```

4. 销毁阶段 (Destruction)

beforeUnmount (Vue 2: beforeDestroy)
- 触发时机：实例销毁前，仍完全可用
- 使用场景 ：
  - 清理定时器
  - 取消事件监听
  - 清除全局状态引用
  javascript 复制代码
```
beforeUnmount() {
  clearInterval(this.timer)
  window.removeEventListener('resize', this.handleResize)
}
```
unmounted (Vue 2: destroyed)
- 触发时机：实例销毁后
- 组件状态：所有指令解绑，事件监听器移除，子实例销毁
- 使用场景 ：
  - 执行最终清理日志
  - 通知外部系统组件已卸载
  javascript 复制代码
```
unmounted() {
  console.log('Component destroyed')
  this.$emit('component-unmounted')
}
```

Vue 3 Composition API 中的生命周期

在 setup() 中使用对应的生命周期函数：

javascript 复制代码

import { 
  onBeforeMount, 
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => console.log('Before Mount'))
    onMounted(() => console.log('Mounted'))
    // 其他钩子同理...
  }
}

特殊场景钩子

errorCaptured ：捕获子孙组件错误

javascript 复制代码

errorCaptured(err, vm, info) {
  console.error(`Error in ${info}:`, err)
  return false // 阻止错误继续向上传播
}

activated/deactivated ：<keep-alive> 缓存组件状态管理

生命周期使用最佳实践

数据请求 ：优先使用 created（比 mounted 早 1 个周期）
DOM 操作 ：必须在 mounted 后进行
状态清理 ：
- 定时器：beforeUnmount
- 全局事件：beforeUnmount
避免在 updated 中修改状态：可能引起无限更新循环
性能敏感操作 ：在 beforeUpdate 中获取旧 DOM 状态

生命周期时序图

复制代码

父组件 created
  ↓
子组件 created → beforeMount → mounted
  ↓
父组件 mounted
  ↓
数据更新 → beforeUpdate → updated
  ↓
组件销毁 → beforeUnmount → unmounted

理解生命周期钩子的执行时机和适用场景，能帮助开发者更精准地控制组件行为，避免常见错误（如内存泄漏），并优化应用性能。