uni-app 页面生命周期及组件生命周期汇总（Vue2、Vue3）

文章目录

一、前言🍃
二、页面生命周期
[三、Vue2 页面及组件生命周期流程图](#三、Vue2 页面及组件生命周期流程图)
[四、Vue3 页面及组件生命周期流程图](#四、Vue3 页面及组件生命周期流程图)
- [4.1 页面加载时序介绍](#4.1 页面加载时序介绍)
- [4.2 页面加载常见问题](#4.2 页面加载常见问题)
- [4.3 onShow 和 onHide](#4.3 onShow 和 onHide)
- [4.4 onInit](#4.4 onInit)
- [4.5 onLoad](#4.5 onLoad)
- [4.6 onReachBottom](#4.6 onReachBottom)
- [4.7 onPageScroll](#4.7 onPageScroll)
- [4.8 onBackPress](#4.8 onBackPress)
- [4.9 onTabItemTap](#4.9 onTabItemTap)
- [4.10 onNavigationBarButtonTap](#4.10 onNavigationBarButtonTap)
五、组件生命周期
六、总结
[🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀](#🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀)

一、前言🍃

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

🎯今日探讨主题 ：uni-app 页面生命周期及组件生命周期汇总（Vue2、Vue3） 的问题。

二、页面生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化 App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的"搜索"按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

三、Vue2 页面及组件生命周期流程图

四、Vue3 页面及组件生命周期流程图

4.1 页面加载时序介绍

接下来我们介绍 onLoad、onReady、onShow 的先后关系，页面加载的详细流程。

1. uni-app框架，首先根据pages.json的配置，创建页面

所以 原生导航栏 是 最快 显示的。页面背景色也应该在这里配置。

2. 根据页面 template 里的组件，创建 dom

这里的 dom 创建仅包含第一批处理的静态 dom 。对于通过 js/uts 更新 data 然后通过 v-for再创建的列表数据，不在第一批处理。

要注意一个页面静态 dom 元素过多，会影响页面加载速度。在uni-app x Android版本上，可能会阻碍页面进入的转场动画。因为此时，页面转场动画还没有启动。

3. 触发onLoad

此时页面还未显示，没有开始进入的转场动画，页面 dom 还不存在。

所以这里不能直接操作 dom（可以修改 data，因为vue框架会等待 dom 准备后再更新界面）; 在 app-uvue 中获取当前的 activity 拿到的是老页面的 activity ，只能通过页面栈获取activity 。

onLoad 比较适合的操作是：接受上页的参数，联网取数据，更新 data 。

手机都是多核的，uni.request 或云开发联网，在子线程运行，不会干扰UI线程的入场动画，并行处理可以更快的拿到数据、渲染界面。

🚫但 onLoad 里不适合进行大量同步耗时运算，因为此时转场动画还没开始。

尤其 uni-app x 在 Android上，onLoad里的代码（除了联网和加载图片）默认是在UI线程运行的，大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。

4. 转场动画开始

新页面开始进入的转场动画，动画默认耗时300ms，可以在路由API中调节时长。

5. 页面onReady

第2步创建 dom 是 虚拟dom ，dom 创建后需要经历一段时间，UI层才能完成了页面上真实元素的创建，即触发了onReady。

onReady 后，页面元素就可以自由操作了，比如 ref 获取节点。同时首批界面也渲染了。

🎯注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于 dom 的数量和复杂度。

如果元素排版和渲染够快，转场动画刚开始就渲染好了；

大多情况下，转场动画走几格就看到了首批渲染内容；

如果元素排版和渲染过慢，转场动画结束都没有内容，就会造成白屏。

联网进程从 onLoad 起就在异步获取数据更新 data ，如果服务器速度够快，第二批数据也可能在转场动画结束前渲染。

6. 转场动画结束

再次强调，5和6的先后顺序不一定，取决于首批 dom 渲染的速度。

4.2 页面加载常见问题

了解了页面加载时序原理，我们就知道如何避免页面加载常见的问题：

优化白屏的方法：
- 页面 dom 太多，注意有的组件写的不好，会拖累整体页面。uni-app x 里减少 dom 数量的策略，详见
- 联网不要在 onReady 里，那样太慢了，在 onLoad 里早点联网
- 在 pages.json 里配置原生导航栏和背景色
- 有的页面 template 内容非常少，整页就是一个需要联网加载的列表，这会造成虽然首批 dom 飞快渲染了，但页面其实还是白的，联网后才能显示字和图。此时需要在 template 里做一些简单占位组件，比如 loading 组件、骨架屏，让本地先显示一些内容。
卡住动画不启动的原因：
- 页面 dom 太多，注意有的组件写的不好，会拖累整体页面。uni-app x 里减少 dom 数量的策略。
- onLoad 里执行了耗时的同步计算。

4.3 onShow 和 onHide

注意页面显示，是一个会重复触发的事件。

a页面刚进入时，会触发a页面的 onShow。
当a跳转到b页面时，a会触发 onHide ，而b会触发 onShow 。
但当b被关闭时，b会触发 onUnload，此时a再次显示出现，会再次触发 onShow。
在 tabbar 页面（指 pages.json 里配置的 tabbar ），不同 tab 页面互相切换时，会触发各自的 onShow 和 onHide 。

4.4 onInit

🎯注意：

仅百度小程序基础库 3.260 以上支持 onInit 生命周期
其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
不依赖页面传参的逻辑可以直接使用 created 生命周期替代

4.5 onLoad

🎯注意：
uni-app x android 平台，如需获取 activity 实例，此时当前页面的 activity 实例并未创建完成，会获取到上一个页面的 activity 实例（首页会获取应用默认的 activity 实例）。如需获取当前页面的 activity 实例，应在 onShow 或 onReady 生命周期中获取。

4.6 onReachBottom

可在 pages.json 里定义具体页面底部的触发距离 onReachBottomDistance ，

比如设为50，那么滚动页面到距离底部50px时，就会触发 onReachBottom 事件。

如使用 scroll-view 导致页面没有滚动，则触底事件不会被触发。scroll-view 滚动到底部的事件请参考 scroll-view 的文档。

4.7 onPageScroll

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

javascript 复制代码

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
	console.log("滚动距离为：" + e.scrollTop);
},

🎯注意：

onPageScroll 里不要写交互复杂的 js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在 非h5 端，js 是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。（uvue在app端无此限制）
在 webview 渲染时，比如 app-vue、微信小程序、H5 中，也可以使用 wxs 监听滚动，参考；在 app-nvue 中，可以使用 bindingx 监听滚动，参考。
如果想实现滚动时标题栏透明渐变，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 为 transparent ，参考。(uni-app x不支持)
如果需要滚动吸顶固定某些元素，推荐使用 css 的粘性布局，参考插件市场。插件市场也有其他 js 实现的吸顶插件，但性能不佳，需要时可自行搜索。（uni-app x可自由在 uts 中设置固定位置）

4.8 onBackPress

属性	类型	说明
from	String	触发返回行为的来源：'backbutton'------左上角导航栏按钮及安卓返回键；'navigateBack'------uni.navigateBack() 方法。支付宝小程序端不支持返回此字段

javascript 复制代码

export default {
	onBackPress(options) {
		console.log('from:' + options.from)
	}
}

🎯注意：

onBackPress 上不可使用 async，会导致无法阻止默认返回。
iOS 端侧滑返回不会触发 onBackPress。
支付宝小程序只有真机可以监听到非 navigateBack 引发的返回事件（使用小程序开发工具时不会触发 onBackPress ），不可以阻止默认返回行为。

4.9 onTabItemTap

参数说明

属性	类型	说明
index	Number	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

javascript 复制代码

onTabItemTap : function(e) {
	console.log(e);
	// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

🎯注意：

onTabItemTap 常用于点击当前 tabitem ，滚动或刷新当前页面。如果是点击不同的 tabitem ，一定会触发页面切换。
如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。
支付宝小程序平台 onTabItemTap 表现为点击非当前 tabitem 后触发，因此不能用于实现点击返回顶部这种操作。

4.10 onNavigationBarButtonTap

参数说明

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

javascript 复制代码

onNavigationBarButtonTap : function (e) {
	console.log(e);
	// e的返回格式为json对象：{"text":"测试","index":0}
}

🎯注意：

nvue 页面 weex 编译模式支持的生命周期同 weex，具体参考：weex 生命周期介绍。

五、组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期：

函数名	说明	平台差异说明
beforeCreate	在实例初始化之前被调用。
created	在实例创建完成后被立即调用。
beforeMount	在挂载开始之前被调用。
mounted	挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

六、总结

一定要注意页面和组件的生命周期差异，注意 Vue2 和 Vue3 的生命周期差异。

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀

一、uni-app 组成和跨端原理
 二、uni-app 各端差异注意事项
 三、uni-app 离线本地存储方案
 四、uni-app UI库、框架、组件选型指南
 五、uni-app 蓝牙开发
 六、uni-app 导航栏开发指南
 七、uni-app 原生控件层级过高无法覆盖的解决方案
 八、uni-app 设置缓存过期时间
 九、uni-app H5端使用注意事项
 十、uni-app之web-view组件 postMessage 通信【跨端开发系列】
十一、uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置【跨端开发系列】
十二、uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】
十三、uni-app 跨端开发精美开源UI框架推荐
 十四、uni-app 中使用微信小程序第三方 SDK 及资源汇总
 十五、uni-app 资源引用（绝对路径和相对路径）方法汇总