在 uni-app 面试中，“生命周期”几乎是必问的考点。很多候选人能说出 Vue 的 created、mounted，却对 uni-app 的 onLoad、onShow、onReady 含糊不清，更说不清两者之间的区别和协作关系。本文将从应用生命周期、页面生命周期、组件生命周期三个层面梳理 uni-app 的生命周期体系，并深入对比它与 Vue 生命周期的异同，帮助你在面试中答得全面、答得准确。
一、为什么 uni-app 的生命周期不能照搬 Vue？
uni-app 是基于 Vue 的跨端框架，它既要遵循 Vue 的组件化开发模式，又要适配小程序、App、H5 等多端运行环境。小程序和原生 App 有自己的页面栈管理、前后台切换、下拉刷新等原生能力，这些能力无法通过 Vue 的组件生命周期完整表达。
因此，uni-app 在 Vue 生命周期之外，额外定义了一套应用生命周期和页面生命周期，形成了“三层生命周期”并存的格局。理解这三层各自的职责和触发时机，是答好这道题的关键。
二、uni-app 的三层生命周期
1. 应用生命周期
应用生命周期定义在 App.vue 中，作用于整个应用，只在应用启动、切换前后台等全局时机触发。主要包括：
- onLaunch：应用初始化完成时触发，全局只触发一次。常用于获取系统信息、检查更新、初始化全局数据。
- onShow：应用启动或从后台进入前台时触发。
- onHide：应用从前台进入后台时触发。
- onError：应用发生脚本错误或 API 调用报错时触发，可收集错误日志。
- onUniNViewMessage、onPageNotFound、onThemeChange 等：分别用于处理 nvue 通信、页面不存在、主题变化等场景。
需要注意：应用生命周期仅在 App.vue 中生效，写在页面或组件中不会执行。
2. 页面生命周期
页面生命周期作用于每一个页面，是 uni-app 面试中考查最密集的部分。核心包括：
- onLoad(options)：页面加载时触发，一个页面只调用一次。参数为页面跳转携带的 query 参数，是获取路由参数的推荐位置。
- onShow：页面显示时触发，每次从其他页面返回或应用回到前台都会触发。
- onReady：页面首次渲染完成时触发，一个页面只调用一次。此时可以安全地操作 DOM 或获取节点信息。
- onHide：页面隐藏时触发，如跳转到其他页面或应用进入后台。
- onUnload：页面卸载时触发，如
redirectTo、navigateBack关闭页面。 - onPullDownRefresh：下拉刷新时触发，需在
pages.json中开启enablePullDownRefresh。 - onReachBottom：页面滚动到底部时触发，常用于分页加载。
- onShareAppMessage、onPageScroll、onResize、onTabItemTap 等：分别处理分享、滚动监听、尺寸变化、Tab 点击等场景。
3. 组件生命周期
组件生命周期与 Vue 基本一致，包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。此外，uni-app 还支持 Vue 3 的 setup 组合式 API，以及 onActivated、onDeactivated 等与 keep-alive 相关的钩子。
三、与 Vue 生命周期的核心区别
区别一：生命周期层级不同
Vue 只有“组件生命周期”一层（Vue 3 增加了应用级的 onErrorCaptured 等，但体系仍以组件为主）。uni-app 则有应用、页面、组件三层，且页面生命周期是 Vue 所没有的。面试时如果只答 Vue 的钩子，会被认为不了解跨端框架的本质。
区别二：触发时机与职责不同
Vue 的 created 在实例创建后触发，mounted 在挂载后触发。uni-app 的页面中，onLoad 对应“页面加载、参数注入”，onReady 对应“首次渲染完成”，onShow 对应“页面可见”。一个常见误区是：在页面中写 mounted 也能执行，但它无法替代 onLoad 获取参数，也无法替代 onShow 感知页面重新显示。
区别三：执行顺序不同
在一个 uni-app 页面中，典型执行顺序为：
beforeCreate → created → onLoad → beforeMount → mounted → onReady → onShow
可以看到，onLoad 介于 created 与 beforeMount 之间，onReady 在 mounted 之后。理解这个顺序，对处理“数据请求放在哪里”“DOM 操作放在哪里”这类问题非常重要。
区别四：多端差异
页面生命周期在不同端的表现略有差异。例如 onReachBottom 在 H5 端需要页面内容超过一屏才触发；onPullDownRefresh 需要配置开启；nvue 页面部分钩子行为与 vue 页面不同。面试中能点出“多端差异”这一层，往往是加分项。
四、面试答题思路与常见追问
回答这道题，建议按“总—分—总”结构组织：
- 总：先说明 uni-app 生命周期分为应用、页面、组件三层，这是与 Vue 最大的结构差异。
- 分：分别列举三层的主要钩子及用途，重点讲页面生命周期的
onLoad、onShow、onReady、onUnload。 - 总：对比与 Vue 的区别，强调层级、时机、顺序、多端四个维度。
常见追问及应对：
- “onLoad 和 onShow 有什么区别？”
onLoad只执行一次，用于接收参数和初始化；onShow每次页面显示都执行，适合刷新数据。 - “onReady 和 mounted 有什么区别？”
onReady表示页面首次渲染完成，早于mounted之后的某些时机，且是页面级钩子；mounted是组件级钩子。 - “页面返回时如何刷新数据？” 用
onShow，而不是onLoad。 - “应用从后台回到前台，哪些钩子会触发？” 应用级
onShow和当前页面级onShow都会触发。
五、总结
uni-app 的生命周期体系可以概括为“三层钩子、各司其职”：应用生命周期管全局，页面生命周期管页面栈与原生交互，组件生命周期管视图与逻辑。它与 Vue 生命周期的根本区别在于，uni-app 为了适配多端，必须在 Vue 之上补充页面级和应用级的生命周期。
面试中，不要只背钩子名称，而要讲清楚“谁在什么时候触发、用来做什么、和 Vue 的哪个钩子对应或替代”。能把执行顺序和多端差异说清楚，基本就能在这道题上拿到高分。
未经允许不得转载：任鹏个人博客 » uni-app 面试题：uni-app 的生命周期有哪些？与 Vue 生命周期有何区别？
