---

---

一、前言🍃

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

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

1. a页面刚进入时，会触发a页面的 onShow。

2. 当a跳转到b页面时，a会触发 onHide ，而b会触发 onShow 。

3. 但当b被关闭时，b会触发 onUnload，此时a再次显示出现，会再次触发 onShow。

4. 在 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）

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() 方法。支付宝小程序端不支持返回此字段

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的按钮文字

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	原生标题栏按钮数组的下标

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 资源引用（绝对路径和相对路径）方法汇总

---