主题
生命周期
页面生命周期
何为“页面”
uni-app 项目中，一个页面就是一个符合 Vue SFC 规范 的 vue 文件。
在 uni-app js 引擎版中，后缀名是 .vue 文件或 .nvue 文件：
- 在 非 app 平台，优先使用
vue - 在 app 平台，优先使用
nvue
提示
页面级既有 页面生命周期，也有 组件生命周期
页面状态
| 函数名 | 说明 |
|---|---|
| onLoad | 页面加载时触发 |
接收上一个页面传递的参数（通过 options 参数），适合 初始化 页面数据 | |
| onShow | 页面显示时触发，包括首次加载和从其他页面返回时 |
| 适合执行页面显示时的逻辑，如：刷新数据 | |
| onReady | 页面初次渲染完成时触发 |
| 适合操作 DOM 或执行需要页面渲染完成后的逻辑 | |
| onHide | 页面隐藏时触发，如跳转到其他页面 |
| 适合清理页面隐藏时的逻辑，如取消定时器 | |
| onUnload | 页面卸载时触发，如关闭页面或跳转到其他页面（不会返回） |
| 适合清理页面卸载时的逻辑，如释放资源 |
页面交互
| 函数名 | 说明 |
|---|---|
| onPullDownRefresh | 用户下拉页面时触发 |
| 用于实现 下拉刷新 功能 | |
| onReachBottom | 页面滚动到底部时触发 |
| 用于实现 上拉加载 功能 | |
| onBackPress | 用户点击返回按钮或 Android 物理返回键时触发 |
| 用于 拦截返回 操作 | |
| onTabItemTap | 点击底部 tab 时触发 |
| 用于监听 tab 切换 事件 | |
| ... | ... |
示例：
js
import { onLoad } from '@dcloudio/uni-app'onReachBottom
由于 onReachBottom 一段时间内不可重复触发，所以为了兼容快速向上滑动的情况，需增加一段时间的延迟，防止触底事件失效
js
onReachBottom(() => {
setTimeout(() => {
// ...
}, 500)
})组件生命周期
提示
组件这里没有页面级的 onLoad 等生命周期！
uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。
| 函数名 | 说明 | 平台差异说明 |
|---|---|---|
| beforeCreate | 在实例初始化之前被调用 | |
| created | 在实例创建完成后被立即调用 | |
| beforeMount | 在挂载开始之前被调用 | |
| mounted | 挂载到实例上去之后调用（处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用 $nextTick） | |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前 | 仅 H5 平台支持 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子 | 仅 H5 平台支持 |
| beforeDestroy | 实例销毁之前调用（在这一步，实例仍然完全可用） | |
| destroyed | Vue 实例销毁后调用（调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁） |