目录
一、核心生命周期流程
graph TD
A[初始化] --> B[beforeCreate]
B --> C[created]
C --> D[模板编译]
D --> E[beforeMount]
E --> F[mounted]
F --> G{数据更新?}
G --是--> H[beforeUpdate]
H --> I[updated]
G --否--> J{销毁触发?}
J --是--> K[beforeDestroy]
K --> L[destroyed]
二、生命周期函数详解
1. beforeCreate
定义时机：实例初始化后，数据观测/事件配置前，
代码示例：
export default {
beforeCreate() {
console.log(this.$data); // undefined
console.log(this.$el); // undefined
}
}
业务场景：
- 初始化非响应式变量
- 插件的基础配置
底层逻辑：
Vue实例刚创建，尚未建立数据观测机制，此时无法访问组件数据和方法。
2. created
定义时机：实例创建完成，数据观测就绪
代码示例：
export default {
data() {
return { count: 0 }
},
created() {
console.log(this.count); // 0
this.fetchData();
}
}
业务场景：
- API数据请求
- 计算属性初始化
- 事件监听器注册
底层逻辑：
已完成数据绑定，但尚未生成DOM结构，此时可安全操作数据但不可操作DOM
3. beforeMount
定义时机：挂载开始前，首次render调用前
代码示例：
export default {
beforeMount() {
console.log(this.$el.innerHTML); // 空内容
}
}
业务场景：
- 服务端渲染前的最后调整
- 动态修改模板内容
底层逻辑：
已完成模板编译，生成虚拟DOM，但尚未替换真实DOM节点
4. mounted
定义时机：实例挂载到DOM后
代码示例：
export default {
mounted() {
this.$refs.button.addEventListener('click', this.handleClick);
this.initChart();
}
}
业务场景：
- DOM操作
- 第三方库初始化
- 定时器启动
底层逻辑：
已完成真实DOM替换，可通过$el访问渲染结果
5. beforeUpdate
定义时机：数据变化后，虚拟DOM重渲染前
代码示例：
export default {
beforeUpdate() {
console.log('当前状态:', this.$el.innerHTML);
}
}
业务场景：
- 更新前的状态记录
- 手动移除旧事件监听
底层逻辑：
数据变化触发重新渲染流程，此时可获取更新前的DOM状态
6. updated
定义时机：虚拟DOM重新渲染完成
代码示例：
export default {
updated() {
this.updateChart();
this.bindNewEvents();
}
}
业务场景：
- 依赖新DOM的操作
- 数据更新后的回调处理
底层逻辑：
完成DOM更新，此时可安全操作新生成的DOM元素
7. beforeDestroy
定义时机：实例销毁前
代码示例：
export default {
beforeDestroy() {
clearInterval(this.timer);
this.$bus.$off('event');
}
}
业务场景：
- 资源释放
- 事件解绑
- 数据持久化
底层逻辑：
实例仍保持完整功能，但即将进入销毁流程
8. destroyed
定义时机：实例完全销毁后
代码示例：
export default {
destroyed() {
console.log(this.$el); // null
console.log(this.count); // undefined
}
}
业务场景：
- 内存泄漏检测
- 销毁后的日志记录
底层逻辑：
所有绑定和监听器已被移除，子实例也被销毁
三、Vue2与Vue3生命周期对比
| Vue2生命周期 | Vue3变更 | 对应关系 |
|---|---|---|
| beforeCreate | 被setup()替代 | 使用setup()函数 |
| created | 被setup()替代 | 使用setup()函数 |
| beforeMount | 保留但改名为onBeforeMount | onBeforeMount |
| mounted | 保留但改名为onMounted | onMounted |
| beforeUpdate | 保留但改名为onBeforeUpdate | onBeforeUpdate |
| updated | 保留但改名为onUpdated | onUpdated |
| beforeDestroy | 改名为onBeforeUnmount | onBeforeUnmount |
| destroyed | 改名为onUnmounted | onUnmounted |
主要改进：
- 命名规范：使用更语义化的名称（如unmount替代destroy）
- 组合式API：通过import方式引入生命周期函数
- 逻辑聚合：相关逻辑可在setup()中集中管理
四、最佳实践建议
- 避免在beforeCreate中操作响应式数据
- 异步操作推荐在created阶段启动
- DOM操作必须等待mounted阶段
- 使用$once监听钩子函数：
mounted() {
this.$once('hook:beforeDestroy', () => {
clearTimeout(this.timer)
})
}
- 组合式API示例：
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('组件挂载完成');
});
}
}