生命周期
约 632 字大约 2 分钟
2025-06-24
Vue2的生命周期有哪些?
Vue2 的生命周期涵盖了从创建、挂载、更新到销毁的整个过程,期间包含多个钩子函数。以下是主要的生命周期钩子及其执行顺序:
生命周期流程图
创建实例 -> beforeCreate -> 初始化 data/methods -> created
↓
判断是否有 template 选项
↓
编译模板 -> beforeMount -> 挂载 DOM -> mounted
↓
数据更新 -> beforeUpdate -> 重新渲染 DOM -> updated
↓
销毁实例 -> beforeDestroy -> 销毁所有子实例、事件监听器 -> destroyed1. 创建阶段(实例初始化)
beforeCreate:实例初始化后,数据观测和event/watcher事件配置之前被调用。此时data和methods尚未初始化,无法访问。created:实例已经创建完成之后被调用。此时data和methods已可用,但模板编译尚未开始,$el不可用。
2. 挂载阶段(DOM 插入)
beforeMount:模板编译 / 挂载之前调用。此时$el已生成但未挂载到页面。mounted:模板编译 / 挂载完成后调用。此时$el已挂载到页面,可以访问 DOM 元素。常用于初始化操作(如 API 请求、DOM 操作)。
3. 更新阶段(数据变化)
beforeUpdate:数据更新时,DOM 重新渲染之前调用。此时数据已更新,但 DOM 尚未更新。updated:数据更新后,DOM 重新渲染完成后调用。此时数据和 DOM 都已更新。注意避免在此钩子中修改数据,可能导致无限循环。
4. 销毁阶段(实例销毁)
beforeDestroy(Vue3 中改为beforeUnmount):实例销毁之前调用。此时实例仍然完全可用,常用于清理定时器、事件监听器等。destroyed(Vue3 中改为unmounted):实例销毁后调用。所有事件监听器和子实例已被销毁。
5. 特殊钩子
activated(组件):keep-alive 缓存的组件被激活时调用。deactivated(组件):keep-alive 缓存的组件被停用时调用。errorCaptured(2.5.0+):捕获子孙组件的错误时调用。
示例代码(展示钩子使用场景)
export default {
data() {
return {
message: 'Hello Vue!'
}
},
beforeCreate() {
console.log('实例初始化,但 data 和 methods 不可用');
},
created() {
console.log('实例已经创建完成');
},
mounted() {
// 常用于数据初始化或API请求
this.fetchData();
},
beforeUpdate() {
console.log('数据更新,但DOM尚未更新');
},
updated() {
console.log('数据和DOM都已更新');
},
beforeDestroy() {
// 清理工作:移除事件监听器、定时器等
window.removeEventListener('resize', this.handleResize);
},
methods: {
fetchData() {
// 模拟API请求
}
}
}官方流程图

