Vue 组件的生命周期分为创建、挂载、更新和销毁四个阶段,每个阶段包含特定的钩子函数(生命周期钩子)。这些钩子允许开发者在不同阶段执行自定义逻辑。
🌟 完整生命周期流程图
创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段
│ │ │ │
beforeCreate beforeMount beforeUpdate beforeUnmount
│ │ │ │
created mounted updated unmounted
生命周期钩子详解
1. 创建阶段 (Initialization)
-
beforeCreate
-
触发时机:实例初始化后,数据观测/事件配置前
-
访问能力 :无法访问
data
、methods
、computed
-
使用场景 :
- 初始化非响应式变量
- 注入插件(如全局事件总线)
javascriptbeforeCreate() { this.$bus = new Vue() // 初始化事件总线 }
-
-
created
-
触发时机:实例创建完成,数据观测/属性计算完成
-
访问能力 :可访问
data
、methods
、computed
-
DOM 状态 :未挂载,
$el
不可用 -
使用场景 :
- 异步数据请求(API 调用)
- 初始化组件状态
javascriptcreated() { axios.get('/api/data').then(res => { this.items = res.data }) }
-
2. 挂载阶段 (Mounting)
-
beforeMount
-
触发时机:模板编译完成,首次渲染前
-
DOM 状态:虚拟 DOM 已创建,但未替换真实 DOM
-
使用场景 :
- 最后时刻的数据修改(不会触发重新渲染)
javascriptbeforeMount() { this.loading = true // 显示加载状态 }
-
-
mounted
-
触发时机:实例挂载到 DOM 后
-
DOM 状态:可访问真实 DOM 元素
-
使用场景 :
- DOM 操作(初始化第三方库)
- 事件监听器注册
javascriptmounted() { this.chart = echarts.init(this.$refs.chart) window.addEventListener('resize', this.handleResize) }
-
3. 更新阶段 (Updating)
-
beforeUpdate
-
触发时机:数据变化后,虚拟 DOM 重新渲染前
-
DOM 状态:当前 DOM 仍为旧状态
-
使用场景 :
- 获取更新前的 DOM 状态(如滚动位置)
javascriptbeforeUpdate() { this.oldScrollTop = this.$refs.list.scrollTop }
-
-
updated
-
触发时机:虚拟 DOM 重新渲染并应用后
-
DOM 状态:DOM 已更新到最新状态
-
使用场景 :
- 依赖新 DOM 的操作(如调整图表尺寸)
- 注意:避免在此修改状态,可能导致无限循环
javascriptupdated() { this.chart.resize() // 图表适配新尺寸 }
-
4. 销毁阶段 (Destruction)
-
beforeUnmount
(Vue 2:beforeDestroy
)-
触发时机:实例销毁前,仍完全可用
-
使用场景 :
- 清理定时器
- 取消事件监听
- 清除全局状态引用
javascriptbeforeUnmount() { clearInterval(this.timer) window.removeEventListener('resize', this.handleResize) }
-
-
unmounted
(Vue 2:destroyed
)-
触发时机:实例销毁后
-
组件状态:所有指令解绑,事件监听器移除,子实例销毁
-
使用场景 :
- 执行最终清理日志
- 通知外部系统组件已卸载
javascriptunmounted() { 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
:捕获子孙组件错误javascripterrorCaptured(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
理解生命周期钩子的执行时机和适用场景,能帮助开发者更精准地控制组件行为,避免常见错误(如内存泄漏),并优化应用性能。