vue生命周期实现
Vue 生命周期实现
Vue 的生命周期钩子是框架在组件创建、更新、销毁过程中自动调用的函数，开发者可以通过这些钩子在不同阶段执行自定义逻辑。以下是 Vue 生命周期的主要阶段及其实现方式：
生命周期钩子分类
-
创建阶段
beforeCreate：实例初始化后，数据观测和事件配置之前调用。此时data和methods未初始化。created：实例创建完成，数据观测和事件配置已完成。可以访问data和methods，但 DOM 未挂载。
-
挂载阶段
beforeMount：模板编译完成，但尚未将 DOM 挂载到页面。mounted：DOM 挂载完成，可以操作 DOM 或发起异步请求。
-
更新阶段
beforeUpdate：数据变化后，DOM 更新前触发。updated：DOM 更新完成后触发。
-
销毁阶段
beforeDestroy：实例销毁前调用，适合清理定时器或解绑事件。destroyed：实例销毁后调用，所有子实例也会被销毁。
代码示例
export default {
data() {
return { message: 'Hello Vue!' };
},
beforeCreate() {
console.log('beforeCreate: 数据未初始化');
},
created() {
console.log('created: 数据已初始化', this.message);
},
beforeMount() {
console.log('beforeMount: DOM 未挂载');
},
mounted() {
console.log('mounted: DOM 已挂载');
},
beforeUpdate() {
console.log('beforeUpdate: 数据更新前');
},
updated() {
console.log('updated: DOM 更新后');
},
beforeDestroy() {
console.log('beforeDestroy: 实例销毁前');
},
destroyed() {
console.log('destroyed: 实例销毁后');
}
};注意事项
- 避免在
beforeCreate中访问data或methods，此时它们尚未初始化。 mounted不保证所有子组件都已挂载，如需等待子组件完成，可使用this.$nextTick。- 在
beforeDestroy中清理定时器、事件监听等资源，防止内存泄漏。
组合式 API 中的生命周期
在 Vue 3 的组合式 API 中，生命周期钩子以函数形式调用，名称略有变化（如 onMounted）：
import { onMounted, onUpdated } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('组合式 API 的 mounted');
});
onUpdated(() => {
console.log('组合式 API 的 updated');
});
}
};
