在使用 uniapp 开发跨平台应用时，生命周期函数（Lifecycle Hooks）是页面与组件运行过程中的重要节点。掌握这些钩子函数的执行时机和作用，有助于我们在合适的时间执行数据加载、事件绑定、资源释放等逻辑，从而提升应用性能与用户体验。
本文将结合 onLoad / onShow / onHide / onUnload / onReady 等常用生命周期函数，详细介绍它们的执行时机、适用场景和注意事项。
一、页面生命周期函数概览
在 uniapp 的页面（.vue 文件）中，主要有以下生命周期：
- onLoad(options)
- 页面加载时触发，只会在页面初次进入时调用一次。
- 可用于接收页面跳转时的参数
options。 - 一般适合进行初始化数据的加载。
- onShow()
- 页面每次显示时触发（包括首次进入和从后台返回前台）。
- 常用于刷新页面数据。
- onReady()
- 页面初次渲染完成时触发。
- 只会执行一次，一般用于获取 DOM 节点信息、初始化第三方插件等。
- onHide()
- 页面隐藏时触发（如 navigateTo 跳转到其他页面，或 app 切到后台）。
- 常用于暂停定时器、停止播放音乐等。
- onUnload()
- 页面卸载时触发（如 navigateBack 返回上一个页面）。
- 适合进行清理工作，比如销毁定时器、解绑监听器等。
二、执行顺序示例
以下是从进入页面到退出页面的执行顺序：
进入页面：onLoad -> onShow -> onReady
切换到其他页面：onHide
从其他页面返回：onShow
关闭页面：onUnload三、代码示例
下面是一个简单的示例，演示生命周期函数的使用。
export default {data() {return {title: '生命周期示例',counter: 0,timer: null}},onLoad(options) {console.log('页面加载，参数：', options);this.counter = 0;},onShow() {console.log('页面显示');// 启动定时器this.timer = setInterval(() => {this.counter++;console.log('计数器：', this.counter);}, 1000);},onReady() {console.log('页面渲染完成');},onHide() {console.log('页面隐藏');// 暂停定时器clearInterval(this.timer);},onUnload() {console.log('页面卸载');// 清理资源clearInterval(this.timer);}
}四、使用场景总结
- onLoad
- 初始化数据
- 接收页面参数
- 发起首次网络请求
- onShow
- 每次页面可见时刷新数据
- 检查用户状态（登录、授权等）
- 恢复被暂停的任务
- onHide
- 暂停任务（定时器、视频播放等）
- 保存临时数据
- onUnload
- 销毁定时器、解绑监听
- 释放内存资源
五、注意事项
- onLoad 只执行一次：即使多次进入同一页面实例，只有在页面首次创建时才会调用。
- onShow 会多次执行：每次页面切换回来都会执行，非常适合做数据刷新。
- onHide 不等于关闭页面：只是页面被切走，可能还会回来。
- 在小程序平台与 App 平台，这些生命周期的执行时机基本一致，但在 H5 端的表现可能略有不同，需要适配。
六、结语
掌握 uniapp 的生命周期函数，可以帮助开发者在合适的时机执行逻辑，从而避免性能浪费与逻辑混乱。在实际开发中，建议根据页面需求合理分配逻辑位置，比如数据初始化放在 onLoad，数据刷新放在 onShow，资源清理放在 onUnload 或 onHide 中。
这样不仅能让代码结构更加清晰，也能让应用运行更流畅。
