小程序开发.uniapp.生命周期

小程序开发.uniapp.生命周期

---

【内容介绍】： uniapp中生命周期相关内容

相关文章推荐：

标题	链接
《小程序开发.概述与环境搭建》	https://blog.csdn.net/qq_28550263/article/details/125860530
《小程序开发.mpvue.架构简介》	https://blog.csdn.net/qq_28550263/article/details/125881363
《VUE实例及其生命周期解析（vue2 与 vue3 比较）》	https://blog.csdn.net/qq_28550263/article/details/123408367
《小程序开发.mpvue.生命周期选项》	https://blog.csdn.net/qq_28550263/article/details/125883991
《小程序开发.mpvue.生命周期选项》	https://blog.csdn.net/qq_28550263/article/details/125883991

jcLee95 的个人博客

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/125883991

---

目 录

---

1. 概述

2. 应用生命周期

3. 页面生命周期

4. 组件生命周期

• 4.1 在 uniapp 中建立 vue2 和 vue3项目的方式
• 4.2 Vue 2 生命周期介绍
• 4.3 Vue 3 生命周期介绍

---

1. 概述

uniapp 生命周期是以 小程序生命周期 为基础实现的，分为 应用生命周期、 页面生命周期、 组件生命周期。 其中 组件生命周期 就是 vue生命周期。

$$uniapp生命周期\{\begin{array}{l}应用生命周期；\\ 页面生命周期；\\ 组件生命周期。=>即vue生命周期\end{array}$$

2. 应用生命周期

函数	描述	说明
onLaunch	当 uniapp 初始化完成时发生调用	全局只会触发一次
onShow	当 uniapp 启动或从后台进入前台时发生调用	即用于监听用户进入小程序
onHide	当 uniapp从前台进入后台时发生调用	即用于监听用户离开小程序
onError	当 uniapp 报错时被触发	-
onUniNViewMessage	对 nvue 页面发生的数据进行监听	-
onUnhandledRejection	对未处理的 Promise 拒绝事件进行监听	-
onPageNotFound	页面不存在监听函数	-
onThemeChange	监听系统主题的变化	-

3. 页面生命周期

函数	描述	说明	使用平台
onLoad	监听页面加载，其参数为上一个页面传递的数据，参数类型为 object。	主要是用于页面传参。
onShow	监听页面显示。	页面每次出现在屏幕上都触发，包括从下级页面返回当前页面。
onReady	监听页面初次渲染完成。	如果页面渲染速度快，会在页面进入动画前触发。
onHide	监听页面隐藏。	-
onUnload	监听页面卸载。	-
onResize	监听窗口尺寸的变化。	-	微信小程序、App
onPullDownRefresh	监听用户下拉动作。	-
onReachBottom	监听页面上拉触底事件。	多用于上拉加载更多数据。
onTabItemTab	点击 TabBar 时触发，参数类型为 object。	-	微信小程序、百度小程序、H5、App自定义组件
onShareAppMessage	用户点击右上角分析时触发	可以用于在分享时设置分析标题、路径等
onShareTimeline	用户点击右上角转发到朋友圈时触发	-	微信小程序v2.8.1+
onAddToFavorites	用户点击右上角收藏时触发	-	微信小程序v2.8.1+
onPageScroll	监听页面滚动，参数为 object类型	-	微信小程序、支付宝小程序、字节小程序、百度小程序
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为object类型	-	H5、App。 1.6.0
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	-	H5、App 。1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的 “搜索”按钮时触发		H5、App 。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	-	H5、App 。1.6.0
onBackPress	监听用户点击右上角收藏	-	微信小程序v2.8.1+

4. 组件生命周期

uniapp 的组件生命周期和 Vue 标准组件生命周期相同。在 当前版本的 uniapp 中，你既可以选择使用 vue2 进行开发，也可以使用 vue3 进行开发。有关 vue2 和 vue3 生命周期的详细讲解和比较说明，请参考博文《VUE实例及其生命周期解析（vue2 与 vue3 比较）》

4.1 在 uniapp 中建立 vue2 和 vue3项目的方式

打开Hbuilder软件，依次点击文件=》新建=》项目

可以看到弹出如图所示对话框：

你可以通过选择 Vue版本选择 中的选项来指定初始化一个 Vue2 或者 Vue3项目。其中选项 2 表示 vue2，选项 3 表示 vue3.

4.2 Vue 2 生命周期介绍

在Vue2中，这些时间关键点分别为 Create、Mount、Update 和 Destroy。这里要指出的是，不论是创建、挂载，还是更新、销毁，都是需要时间的，也就是他们都是一个时间段。由于这些过程都是Vue框架为我们完成的，也不需要我们进行处理，因此我们完全可以将这几个过程认作时间点。具体而言，这四个点的功能和特点如下：

• 【Create】: Vue实例创建。
• 【Mount】 : Vue实例挂载。
• 【Update】: Vue实例数据更新。
• 【Destroy】: Vue实例销毁。

还有一些特殊的生命周期钩子，说他们特殊是因为他们用于特定的场景。如activated、deactivated和errorCaptured。这一部分将在 后续 讲述。

Vue2生命周期函数	描述
beforeCreate	在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
created	在实例创建完成后被立即同步调用。
beforeMount	在挂载开始之前被调用 相关的 render 函数首次被调用。
mounted	实例被挂载后调用 这时 el 被新创建的 vm.$el 替换了。
beforeUpdate	数据更新时被调用，发生在虚拟DOM达不到之前。
updated	在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

4.3 Vue 3 生命周期介绍

Vue3生命周期选项	描述	Vue3 生命周期钩子	描述
beforeCreate	在组件实例初始化完成之后立即调用	不需要	-
created	在组件实例处理完所有与状态相关的选项后调用	不需要	-
beforeMount	在组件被挂载之前调用	onBeforeMount()	注册一个钩子，在组件被挂载之前被调用
mounted	在组件被挂载之后调用	onMounted()	注册一个回调函数，在组件挂载完成后执行
beforeUpdate	在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用	onBeforeUpdate()	注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updated	在组件即将因为一个响应式状态变更而更新其 DOM 树之后调用	onUpdated()	注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeUnmount	在一个组件实例被卸载之前调用	onBeforeUnmount()	注册一个钩子，在组件实例被卸载之前调用
unmounted	在一个组件实例被卸载之后调用	onUnmounted()	注册一个回调函数，在组件实例被卸载之后调用