简单整理了一下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的生命周期类似,用于控制组件的初始化、数据变化、销毁等过程中的逻辑操作。

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


目录
相关文章
|
29天前
|
小程序
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
|
4天前
|
JavaScript 前端开发 程序员
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
这篇文章详细介绍了Vue的生命周期和各个阶段的钩子函数,包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`。文章通过图解、方法说明、代码实例和测试效果,阐述了每个钩子函数的作用和使用场景,帮助读者深入理解Vue实例从创建到销毁的整个过程。
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
|
17天前
|
JavaScript API 开发者
Vue的生命周期,创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。
【8月更文挑战第1天】Vue的生命周期,创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。
42 11
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
18天前
|
JavaScript 前端开发 开发者
vue生命周期
【8月更文挑战第1天】vue生命周期
24 2
|
26天前
|
存储 小程序 安全
|
6天前
|
存储 JavaScript 小程序
|
7天前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
22 0
|
7天前
|
JavaScript 前端开发 安全
VUE——APP,后端,前端三端AES加密解密
VUE——APP,后端,前端三端AES加密解密
17 0