目录
一、 应用生命周期（App 的生命）
在App.vue页面
| 生命周期钩子 | 触发时机 | 通俗解释 | 典型用途 | 举例 |
|---|---|---|---|---|
| onLaunch | App 首次启动时触发 | App“出生”，只触发一次 | 初始化全局数据（如获取用户 token） | 用户第一次打开小程序或APP |
| onShow | App 从后台切换到前台 | App“被唤醒” | 检查更新、恢复播放音乐 | 用户从微信聊天界面返回你的小程序 |
| onHide | App 从前台退到后台 | App“去睡觉了” | 暂停动画、保存临时数据 | 用户点击手机Home键切换到其他应用 |
onLaunch → onShow → onHide
二、页面生命周期（单个页面的生命）
每个页面
| 生命周期钩子 | 触发时机 | 通俗解释 | 典型用途 |
|---|---|---|---|
| onInit（仅支付宝小程序） | 页面数据初始化 | 页面“刚出生，但还没加载” | 提前处理数据（少用） |
| onLoad | 页面首次加载 | 页面“出生” | 接收路由参数（如 ?id=123） |
| onShow | 页面显示（每次进入） | 页面“被看到” | 刷新数据（如返回时更新列表） |
| onReady | 页面首次渲染完成 | 页面“打扮好了” | 操作 DOM（如调用地图组件） |
| onHide | 页面被隐藏（跳转其他页面） | 页面“躲起来了” | 暂停视频播放 |
| onUnload | 页面被销毁（关闭或返回） | 页面“死亡” | 清除定时器、取消网络请求 |
| onResize | 窗口尺寸变化（如旋转屏幕） | 页面“被拉伸/压缩” | 调整响应式布局 |
| onPullDownRefresh | 下拉刷新 | 用户“往下拉页面” | 重新加载数据 |
| onReachBottom | 滚动到底部 | 用户“滑到底了” | 加载更多（分页） |
| onShareAppMessage | 点击分享按钮 | 用户“要分享页面” | 自定义分享内容 |
| onBackPress | 点击返回按钮（Android） | 用户“想退出” | 阻止返回或弹窗提示 |
onLoad → onShow → onReady → onHide → onUnload
三、 组件生命周期（组件的生命）
自定义的组件里，组件用不了页面生命周期（有时候忘记了写onShow会没效果）
| 生命周期钩子 | 触发时机 | 通俗解释 | 典型用途 |
|---|---|---|---|
| beforeCreate | 组件创建前 | 组件“还没出生” | 极少使用 |
| created | 组件创建完成（数据已初始化） | 组件“出生了，但还没挂载” | 初始化数据 |
| beforeMount | 组件挂载前 | 组件“准备插入页面” | 极少使用 |
| mounted | 组件挂载到页面（DOM 已渲染） | 组件“已经在页面上” | 操作 DOM、调用接口 |
| beforeUpdate | 数据变化，但 DOM 未更新 | 组件“准备换新衣服” | 更新前检查数据 |
| updated | 数据更新，DOM 已渲染 | 组件“换好新衣服了” | 操作更新后的 DOM |
| beforeDestroy | 组件销毁前 | 组件“快死了” | 清除定时器、解绑事件 |
| destroyed | 组件已销毁 | 组件“死了” | 收尾工作 |
beforeCreate →created → beforeMount→ mounted → beforeUpdate → updated → destroyed
四、总结对比
| 核心生命周期 | 关键用途 |
onLaunch → onShow → onHide | 全局初始化、状态管理 |
onLoad → onShow → onReady → onHide → onUnload | 参数接收、数据加载、DOM 操作 |
|
| 数据初始化、DOM 交互、资源释放 |
扫一扫
1224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
