【vue入门手册】三、vue生命周期

简介: 【vue入门手册】三、vue生命周期

Vue组件生命周期是 Vue 实例从创建到销毁的整个过程,用拼积木建房子来解释Vue组件的生命周期,更容易理解。

假设用积木拼一座高楼大厦,需要按照一定的顺序,先组装好每一个积木块,再将它们连接在一起,建成一座漂亮的大厦。

Vue组件的生命周期也是类似的,在不同的阶段里,我们需要完成一些特定的工作,最终得到一个完整的组件。

Vue生命周期中,有 8 个不同的阶段(可以想象成8个步骤),分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。每一个阶段都有其独特的应用场景.


  • beforeCreate 阶段,相当于你刚准备开始拼积木时,还没有开始真正组装。这个阶段主要用于组件的初始化工作,比如获取数据等。


  • created 阶段,就像你刚开始拼积木一样,已经有了完整的积木块可以使用。在这个阶段中,你可以调用组件的方法和属性,进行一些数据处理或其他初始化工作。


  • beforeMount 阶段就像你开始将积木块连接在一起,组装成大楼的雏形时,但还未安装到页面上。这个阶段常用于进行一些异步请求数据,或者进行 DOM 操作等。


  • mounted 阶段,就像你把积木块全部连接,组装成一个完整的大楼时,已经可以展示在页面上了。在这个阶段,组件已经被挂载到页面上,可以进行一些 DOM 操作和绑定事件等。


  • beforeUpdate 阶段,就像在你已经完成大楼建造后,需要进行一些翻新工作,进行一些变动。在这个阶段,你可以在数据变化前进行一些操作。


  • updated 阶段,就像在你完成大楼翻新后,大厦重新焕发出光彩,展现出更好的样子。在这个阶段,DOM 已经更新,你可以对页面进行操作了。


  • beforeDestroy 阶段,相当于你要拆掉刚才拼好的高楼大厦。在这个阶段主要做一些清理工作,比如取消订阅或服务卸载等。


  • destroyed 阶段,就像你拆掉了整个大楼一样,组件已经被销毁。在这个阶段,你需要进行一些垃圾回收等清理工作。
相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
311 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
293 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
793 0
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
419 1
|
5月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
262 0
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1028 4
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
852 77
|
8月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
473 17