页面常用的生命周期

更新: 9/4/2025字数: 0 字时长: 0 分钟

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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体见下方注意事项

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

接下来我们介绍 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 渲染的速度。