Uni-app 是一个使用 Vue.js 开发跨平台应用的框架，支持编译到多个平台（如 iOS、Android、H5、微信小程序等）。在 Uni-app 中，生命周期钩子（Lifecycle Hooks）用于在应用或页面的不同阶段执行特定的逻辑。理解和合理使用生命周期钩子，有助于优化应用的性能和用户体验。
一、应用（App）级生命周期钩子
这些钩子函数用于整个应用的生命周期管理，主要在 App.vue 文件中定义。
| 生命周期钩子 | 触发时机 | 说明 |
|---|---|---|
onLaunch | 应用初始化时触发，只会触发一次 | 用于进行初始化操作，如获取全局数据、进行登录等 |
onShow | 应用启动，或从后台切回前台时触发 | 适用于刷新数据或恢复应用状态 |
onHide | 应用切到后台时触发 | 适用于保存应用状态、停止计时器等 |
onError | 应用发生脚本错误时触发 | 用于错误日志收集和处理 |
onPageNotFound | 当打开的页面不存在时触发 | 可以进行页面重定向或提示用户 |
示例：App.vue 中定义生命周期钩子
export default {
onLaunch(options) {
console.log('应用启动', options);
// 初始化操作
},
onShow(options) {
console.log('应用显示', options);
// 恢复应用状态
},
onHide() {
console.log('应用隐藏');
// 保存应用状态
},
onError(error) {
console.error('应用错误', error);
// 错误处理
},
onPageNotFound(err) {
console.warn('页面未找到', err);
// 页面重定向
}
}
二、页面级生命周期钩子
每个页面都有自己的生命周期钩子，用于管理页面在不同阶段的行为。这些钩子在页面的 .vue 文件中定义。
| 生命周期钩子 | 触发时机 | 说明 |
|---|---|---|
onLoad | 页面加载时触发 | 接收路由参数，进行初始化 |
onShow | 页面显示时触发 | 页面从后台或其他页面返回时调用 |
onReady | 页面初次渲染完成时触发 | 适合进行与视图相关的操作 |
onHide | 页面隐藏时触发 | 跳转到其他页面或应用进入后台 |
onUnload | 页面卸载时触发 | 页面销毁前的清理操作 |
onPullDownRefresh | 用户下拉刷新时触发 | 实现下拉刷新功能 |
onReachBottom | 页面滚动到底部时触发 | 加载更多数据 |
onShareAppMessage | 用户点击分享时触发 | 定制分享内容 |
onShareTimeline | 用户分享到朋友圈时触发 | 定制分享到朋友圈的内容 |
示例：页面中的生命周期钩子
export default {
data() {
return {
// 页面数据
}
},
onLoad(options) {
console.log('页面加载', options);
// 初始化数据
},
onShow() {
console.log('页面显示');
// 刷新数据
},
onReady() {
console.log('页面初次渲染完成');
// 与视图相关的操作
},
onHide() {
console.log('页面隐藏');
// 保存页面状态
},
onUnload() {
console.log('页面卸载');
// 清理资源
},
onPullDownRefresh() {
console.log('用户下拉刷新');
// 刷新数据
uni.stopPullDownRefresh(); // 停止下拉刷新
},
onReachBottom() {
console.log('页面滚动到底部');
// 加载更多数据
},
onShareAppMessage() {
return {
title: '分享标题',
path: '/pages/home/home',
imageUrl: '/static/share.png'
};
},
onShareTimeline() {
return {
title: '分享到朋友圈的标题'
};
}
}
三、组件级生命周期钩子
在 Uni-app 中，组件也有自己的生命周期钩子，类似于 Vue.js 的生命周期钩子。这些钩子用于管理组件的创建、更新和销毁过程。
| 生命周期钩子 | 触发时机 | 说明 |
|---|---|---|
created | 组件实例创建后触发 | 数据初始化等操作 |
mounted | 组件挂载到页面后触发 | DOM 操作等 |
updated | 组件数据更新后触发 | 响应数据变化 |
destroyed | 组件销毁前触发 | 清理资源 |
示例：组件中的生命周期钩子
export default {
data() {
return {
// 组件数据
}
},
created() {
console.log('组件创建');
// 初始化数据
},
mounted() {
console.log('组件挂载');
// 访问 DOM
},
updated() {
console.log('组件更新');
// 响应数据变化
},
destroyed() {
console.log('组件销毁');
// 清理定时器等资源
}
}
四、注意事项
- 区分 App 和页面生命周期钩子：确保在正确的位置使用相应的生命周期钩子，如应用级钩子在
App.vue，页面级钩子在页面组件中。 - 异步操作：在生命周期钩子中进行异步操作（如网络请求）时，注意处理好回调和错误，避免阻塞页面渲染。
- 性能优化：合理利用生命周期钩子进行数据加载和资源管理，避免在频繁触发的钩子中执行重操作，如
onShow和onHide。