引言
第一次听到vue的生命周期，发现自己一无所知，所以我决定写一篇文章记录下来，便于以后复习。
Vue 的生命周期是vue的核心知识点之一，不仅是开发中频繁涉及的内容，也是面试中的常见问题。
vue的生命周期是什么🤔
与其说是vue的生命周期，不如说是vue组件的生命周期。在 Vue 中，每个组件都有自己的生命周期，类似于生命的起承转合。组件从被创建，经历数据初始化，挂载，更新，最后被销毁。
vue生命周期的四个阶段和执行顺序
先整体介绍，后文有进一步说明。
四个阶段，每个阶段都有两个钩子函数：
生命周期之间的关系
- 创建阶段负责初始化实例。
- 挂载阶段将实例与 DOM 关联。
- 运行阶段处理数据变化的响应。
- 销毁阶段确保资源得到妥善释放。
这些钩子函数的
this上下文绑定到组件实例，因此开发者可以方便地访问组件的数据和方法。 生命周期方法不能使用箭头函数来定义（如created: () => {}），否则会导致this指向问题，无法正确访问 Vue 实例。
拓展之钩子函数🪝：
Vue 组件在不同生命周期阶段自动调用的特殊方法，用于在组件创建、更新和销毁的过程中执行特定逻辑。
执行顺序，vue实例从创建到销毁的全过程：
详细解析各个生命周期阶段
1. 创建阶段
创建阶段是 Vue 实例初始化的过程，主要完成数据观察、方法绑定等。
- beforeCreate
触发时机：实例初始化后，但数据和方法尚未可用。
用途：常用于插件初始化或全局变量设置。
export default {
beforeCreate() {
console.log('beforeCreate: 数据和方法还未初始化');
}
};
- created
触发时机：实例初始化完成，数据和方法已可用，但 DOM 尚未挂载。
用途：常用于初始化数据或调用后端接口。
export default {
data() {
return { message: '' };
},
created() {
console.log('created: 可以访问数据和方法');
this.message = 'Hello, Vue!';
}
};
2. 挂载阶段
挂载阶段是将 Vue 实例与 DOM 关联的过程。
- beforeMount
触发时机：模板编译完成，但还未挂载到真实 DOM 上。
用途：可以调整数据，但不影响 DOM。
export default {
beforeMount() {
console.log('beforeMount: 模板已编译，DOM 尚未更新');
}
};
- mounted
触发时机：实例挂载到真实 DOM 后。
用途：常用于初始化第三方插件或直接操作 DOM。
export default {
mounted() {
console.log('mounted: DOM 已挂载');
this.$nextTick(() => {
console.log('DOM 操作可以在此处完成');
});
}
};
3. 运行阶段
运行阶段是组件响应式数据驱动视图更新的过程。
- beforeUpdate
触发时机：响应式数据变化，虚拟 DOM 更新前。
用途：适合做更新前的数据快照。
export default {
data() {
return { count: 0 };
},
beforeUpdate() {
console.log(`beforeUpdate: count = ${this.count}`);
}
};
- updated
触发时机：数据变化后，虚拟 DOM 更新完成。
用途：可以进行与更新后的 DOM 相关的操作。
export default {
data() {
return { count: 0 };
},
updated() {
console.log(`updated: count = ${this.count}`);
this.$nextTick(() => {
console.log('可以操作已更新的 DOM');
});
}
};
4. 销毁阶段
销毁阶段是 Vue 实例结束生命周期的过程。
- beforeDestroy
触发时机：实例销毁前，数据和方法仍然可用。
用途：常用于清理定时器或事件监听。
export default {
data() {
return { timer: null };
},
mounted() {
this.timer = setInterval(() => console.log('定时器运行中'), 1000);
},
beforeDestroy() {
console.log('beforeDestroy: 清理资源');
clearInterval(this.timer);
}
};
- destroyed
触发时机：实例销毁后，数据和方法已不可用。
用途：清理收尾工作，确认实例已完全移除。
export default {
destroyed() {
console.log('destroyed: 实例已销毁');
}
};
四个阶段的八个钩子函数
| 生命周期钩子 | 常见用途 | 示例操作 |
|---|---|---|
| beforeCreate | 插件初始化、全局设置 | 初始化配置 |
| created | 数据初始化、后端接口调用 | 设置 data，发送网络请求 |
| beforeMount | 数据调整 | 最后修改数据 |
| mounted | 操作真实 DOM、初始化插件 | 使用第三方库，如 swiper |
| beforeUpdate | 数据快照 | 日志记录 |
| updated | 操作更新后的 DOM | 修改已更新的 DOM |
| beforeDestroy | 清理资源 | 清理定时器、解绑事件监听 |
| destroyed | 收尾工作 | 确认销毁完成 |
结语
以上就是我暂时了解的vue生命周期，有所缺漏的地方欢迎大佬补充。🧑🏻💻
