简单整理了一下vue、小程序、uni-app的生命周期及其作用

简介: 简单整理了一下vue、小程序、uni-app的生命周期及其作用

Vue、小程序和uni-app都是前端框架或技术,它们有各自的生命周期。下面我将分别介绍它们的生命周期及其作用。

1. Vue的生命周期:

  - beforeCreate:实例被创建之前执行。

  - created:实例已经创建完成,可以进行数据观测和事件初始化等操作。

  - beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。

  - mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

  - beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

  - updated:由于数据更改导致虚拟DOM重新渲染和打补丁后调用。

  - beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

  - destroyed:Vue实例销毁后调用。清理工作应该在这里进行。

  Vue的生命周期主要用于控制组件的初始化、数据变化、销毁等过程中的逻辑操作,例如在created钩子中进行数据初始化,在mounted钩子中进行DOM操作等。

2. 小程序的生命周期(以微信小程序为例):

  - onLoad:页面加载时触发。

  - onShow:页面显示时触发,每次打开页面都会触发。

  - onReady:页面初次渲染完成时触发。

  - onHide:页面隐藏时触发,如跳转到其他页面或底部导航切换时。

  - onUnload:页面卸载时触发。

  小程序的生命周期主要用于控制页面的初始化、显示、隐藏和销毁等过程中的逻辑操作,例如在onLoad中进行数据初始化,在onShow中进行数据更新等。

3. uni-app的生命周期:

  - beforeCreate:组件实例被创建之前执行。

  - created:组件实例已经创建完成,可以进行数据观测和事件初始化等操作。

  - beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。

  - mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

  - beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

  - updated:由于数据更改导致虚拟DOM重新渲染和打补丁后调用。

  - beforeDestroy:组件实例销毁之前调用。在这一步,组件实例仍然完全可用。

  - destroyed:组件实例销毁后调用。清理工作应该在这里进行。

  uni-app的生命周期与Vue的生命周期类似,用于控制组件的初始化、数据变化、销毁等过程中的逻辑操作。

总的来说,这些框架和技术的生命周期提供了一系列的钩子函数,用于控制组件或页面在不同阶段执行特定的逻辑代码,方便开发者进行初始化、数据管理和资源清理等操作。


目录
相关文章
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
18 7
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
17 7
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
15 7
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
16 7
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课程考勤及作业提交App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课程考勤及作业提交App的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的电影信息推荐APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的电影信息推荐APP的详细设计和实现(源码+lw+部署文档+讲解等)