javascript生命周期钩子是框架为组件提供的一组特殊函数，会在组件从创建、运行到销毁的不同时间点自动触发，开发者可以在这些函数中编写对应阶段需要执行的业务逻辑，比如初始化数据、操作DOM、清理定时器等。
什么是javascript生命周期钩子
生命周期钩子本质上是组件实例在特定阶段会调用的回调函数，不同的前端框架（如Vue、React）都有对应的生命周期钩子设计，核心目的都是让开发者能够感知组件的状态变化，在合适的时机执行对应操作。比如在组件挂载到页面后发起数据请求，在组件销毁前清除定时器避免内存泄漏。
生命周期钩子的核心特点
- 自动触发：不需要开发者手动调用，框架会在对应阶段自动执行
- 阶段对应：每个钩子都对应组件生命周期的一个明确阶段
- 上下文绑定：钩子函数内部的
this通常指向当前组件实例
组件的关键生命周期阶段
以Vue组件的经典生命周期为例，组件从创建到销毁可以分为四个核心阶段，每个阶段对应不同的生命周期钩子：
1. 初始化阶段
这个阶段是组件刚被创建，还没有挂载到DOM上的时期，主要完成数据观测、事件配置等初始化工作，对应两个钩子：
- beforeCreate：组件实例刚被创建，此时数据观测和事件配置都还没有完成，无法访问
data和methods中的数据和方法 - created：组件实例创建完成，数据观测、属性和方法的运算、事件回调都已经配置完成，可以访问
data和methods，但此时还没有挂载DOM，无法操作页面元素
初始化阶段的示例代码如下：
// Vue组件初始化阶段示例
export default {
data() {
return {
msg: '初始数据'
}
},
beforeCreate() {
// 此时无法访问this.msg，输出undefined
console.log('beforeCreate阶段，msg：', this.msg)
},
created() {
// 此时可以访问this.msg，输出初始数据
console.log('created阶段，msg：', this.msg)
// 可以在这里发起初始数据请求
this.fetchData()
},
methods: {
fetchData() {
console.log('发起数据请求')
}
}
}
2. 挂载阶段
这个阶段是组件将模板编译成DOM并插入到页面中的过程，对应两个钩子：
- beforeMount：模板编译完成，但还没有将DOM挂载到页面上，此时可以获取到编译后的模板，但还没有生成真实DOM
- mounted：组件已经挂载到页面中，真实DOM已经生成，可以操作DOM元素，比如获取元素尺寸、初始化第三方DOM库等
挂载阶段的示例代码如下：
export default {
data() {
return {
list: []
}
},
beforeMount() {
console.log('beforeMount阶段，还没有挂载DOM')
},
mounted() {
// 可以操作DOM，比如获取页面元素
const dom = document.getElementById('app')
console.log('mounted阶段，DOM已挂载：', dom)
// 可以在这里发起需要依赖DOM的请求
this.loadList()
},
methods: {
loadList() {
// 模拟请求数据
setTimeout(() => {
this.list = [1, 2, 3]
}, 1000)
}
}
}
3. 更新阶段
当组件的数据发生变化，需要重新渲染DOM时会进入更新阶段，对应两个钩子：
- beforeUpdate：数据更新后，DOM重新渲染之前触发，此时可以获取更新前的DOM状态
- updated：数据更新完成，DOM重新渲染之后触发，此时可以获取更新后的DOM状态，但要注意避免在这里修改数据，否则可能导致无限更新循环
更新阶段的示例代码如下：
export default {
data() {
return {
count: 0
}
},
beforeUpdate() {
console.log('beforeUpdate阶段，count更新前的DOM值：', document.getElementById('count').innerText)
},
updated() {
console.log('updated阶段，count更新后的DOM值：', document.getElementById('count').innerText)
},
methods: {
addCount() {
this.count++
}
}
}
4. 销毁阶段
当组件被移除、不再使用时就会进入销毁阶段，对应两个钩子：
- beforeDestroy：组件销毁之前触发，此时组件实例仍然完全可用，可以在这里清理定时器、解绑自定义事件等，避免内存泄漏
- destroyed：组件销毁之后触发，此时组件的所有指令、事件监听器都已经被移除，子实例也都被销毁
销毁阶段的示例代码如下：
export default {
data() {
return {
timer: null
}
},
created() {
// 创建定时器
this.timer = setInterval(() => {
console.log('定时器执行')
}, 1000)
},
beforeDestroy() {
// 销毁前清除定时器
if (this.timer) {
clearInterval(this.timer)
this.timer = null
console.log('定时器已清除')
}
},
destroyed() {
console.log('组件已销毁')
}
}
不同框架生命周期钩子的差异
虽然核心阶段类似，但不同框架的钩子名称和触发时机略有不同：
| 框架 | 初始化阶段钩子 | 挂载阶段钩子 | 更新阶段钩子 | 销毁阶段钩子 |
|---|---|---|---|---|
| Vue 2 | beforeCreate、created | beforeMount、mounted | beforeUpdate、updated | beforeDestroy、destroyed |
| Vue 3 | setup（替代beforeCreate、created） | onBeforeMount、onMounted | onBeforeUpdate、onUpdated | onBeforeUnmount、onUnmounted |
| React | constructor、componentWillMount（旧）、static getDerivedStateFromProps | componentDidMount | componentWillUpdate（旧）、getSnapshotBeforeUpdate、componentDidUpdate | componentWillUnmount |
生命周期钩子的使用注意事项
- 不要在
updated钩子中修改当前组件的状态数据，否则可能触发无限循环的更新 - 销毁阶段的钩子一定要清理组件内创建的定时器、自定义事件监听，避免内存泄漏
- 初始化数据请求可以放在
created或者mounted中，如果请求不依赖DOM就放在created，依赖DOM就放在mounted - 不同框架的生命周期钩子语法不同，使用前需要先确认对应框架的官方文档
生命周期钩子的设计是为了让开发者更好地控制组件的行为，理解每个阶段的触发时机和作用，才能更合理地编写组件逻辑，提升应用的性能和稳定性。
javascript生命周期钩子组件生命周期beforeCreatecreated修改时间：2026-06-25 05:30:37