引言
第一次听到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生命周期,有所缺漏的地方欢迎大佬补充。🧑🏻💻