uniapp中页面生命周期与组件生命周期是开发的核心概念，页面生命周期针对整个页面，包括onLoad（页面加载，接收参数）、onShow（页面显示）、onReady（页面首次渲染完成）、onHide（页面隐藏）、onUnload（页面卸载）等关键阶段，常用于全局数据初始化和页面状态管理，组件生命周期则作用于组件实例，涵盖created（组件创建）、mounted（组件挂载）、beforeDestroy（销毁前）、destroyed（销毁后）等，侧重组件内部逻辑处理，两者协同工作，页面生命周期控制整体流程，组件生命周期细化模块功能，确保应用各阶段数据与交互的有序执行。
UniApp 页面生命周期与组件生命周期：全面解析与应用实践
UniApp 是一个基于 Vue.js 的全栈开发框架，支持一套代码编译至 iOS、Android、Web 及微信、支付宝、百度等多端小程序，在跨端开发中占据重要地位，在开发过程中，生命周期是理解框架运行机制的核心概念——它指页面或组件从创建、渲染、更新到销毁的全周期中，框架自动触发的一系列函数，合理运用生命周期函数，能帮助开发者在恰当时机执行初始化数据、请求接口、清理资源等逻辑,有效规避性能问题与异常风险。
UniApp 的生命周期主要分为 页面生命周期 与 组件生命周期 两大类，二者均基于 Vue 生命周期机制扩展，但作用域与触发场景存在差异：页面生命周期管理独立页面的全局逻辑（如路由参数、显隐状态），而组件生命周期聚焦于组件内部的状态与渲染控制，本文将深入解析二者的执行机制、核心函数及应用场景,助力开发者精准掌握跨端开发中的生命周期管理。
页面生命周期：页面级逻辑的控制中枢
页面生命周期是 UniApp 中独立页面（如 pages/index/index.vue）的核心管理机制，由框架根据页面状态自动触发，主要用于处理页面级别的全局逻辑，包括路由参数接收、页面显隐状态管理、全局数据交互等，其执行顺序严格遵循“加载→显示→渲染→隐藏→卸载”的生命周期链,理解这一顺序对避免逻辑冲突至关重要。
核心页面生命周期函数详解
UniApp 的页面生命周期函数在 Vue 基础上增加了跨端适配的特有函数，以下是常用函数的触发时机、参数及典型应用场景：
| 生命周期函数 | 触发时机 | 参数说明 | 典型应用场景 |
|---|---|---|---|
onLoad |
页面加载时触发（页面创建时，仅触发一次） | options：路由参数对象（如 uni.navigateTo 传递的 id、name 等参数） |
接收路由参数，初始化页面数据（如根据 ID 请求商品详情） |
onShow |
页面显示时触发（每次从隐藏到显示时触发，如从下级页面返回、Tab 切换） | 无 | 刷新页面数据（如订单列表从详情页返回后更新状态） |
onReady |
页面首次渲染完成时触发（仅触发一次，DOM 结构已生成） | 无 | 操作 DOM 节点（如通过 uni.createSelectorQuery() 获取组件尺寸）、调用依赖 DOM 的 API |
onHide |
页面隐藏时触发（如跳转至其他页面、Tab 切换至其他页面、从前台切换至后台） | 无 | 暂停耗时操作（如视频播放、定时器、 WebSocket 连接） |
onUnload |
页面卸载时触发（如调用 uni.navigateBack 返回、页面被销毁） |
无 | 清理资源（如清除定时器、解绑全局事件监听器、释放内存） |
onPullDownRefresh |
用户下拉刷新时触发（需在 pages.json 中配置 enablePullDownRefresh: true） |
无 | 重新请求页面数据，调用 uni.stopPullDownRefresh() 停止刷新动画 |
onReachBottom |
页面滚动到底部时触发（需在 pages.json 中设置 onReachBottomDistance，默认 50px） |
无 | 加载更多数据（分页加载 |
