UniApp 生命周期全面解析
UniApp 的生命周期包括应用生命周期、页面生命周期和组件生命周期三部分，同时兼容 Vue 组件的生命周期。以下是详细说明：
一、应用生命周期（App.vue）
在 App.vue 中定义的应用级生命周期函数：
export default {
// 1. 应用初始化完成时触发（全局只触发一次）
onLaunch(options) {
console.log('App Launch', options)
// options包含场景值、启动参数等
},
// 2. 应用显示时触发（从后台进入前台）
onShow(options) {
console.log('App Show', options)
},
// 3. 应用隐藏时触发（从前台进入后台）
onHide() {
console.log('App Hide')
},
// 4. 应用报错时触发
onError(err) {
console.error('App Error', err)
},
// 5. 页面不存在监听（仅微信小程序支持）
onPageNotFound(res) {
console.log('Page Not Found', res)
// 可重定向到404页面
uni.redirectTo({
url: '/pages/error/404'
})
},
// 6. 原生主题改变时触发（仅App支持）
onThemeChange(theme) {
console.log('Theme Changed', theme)
}
}
二、页面生命周期（页面vue文件中）
在页面文件中定义的生命周期函数：
export default {
// 1. 页面加载时触发（一个页面只会调用一次）
onLoad(options) {
console.log('Page Load', options)
// 获取路由参数
this.id = options.id
},
// 2. 页面显示时触发（每次打开页面都会调用）
onShow() {
console.log('Page Show')
},
// 3. 页面初次渲染完成时触发（一个页面只会调用一次）
onReady() {
console.log('Page Ready')
// 此时可操作DOM
},
// 4. 页面隐藏时触发（跳转到其他页面时）
onHide() {
console.log('Page Hide')
},
// 5. 页面卸载时触发（页面关闭或路由跳转离开时）
onUnload() {
console.log('Page Unload')
},
// 6. 页面下拉刷新时触发
onPullDownRefresh() {
console.log('Page PullDownRefresh')
// 处理刷新逻辑
setTimeout(() => {
uni.stopPullDownRefresh() // 停止刷新动画
}, 1000)
},
// 7. 页面上拉触底时触发
onReachBottom() {
console.log('Page ReachBottom')
// 加载更多数据
this.loadMoreData()
},
// 8. 用户点击右上角分享时触发（微信小程序专用）
onShareAppMessage(options) {
console.log('Share App Message', options)
return {
title: '自定义分享标题',
path: '/pages/index/index',
imageUrl: '/static/share.jpg'
}
},
// 9. 页面滚动时触发
onPageScroll(e) {
console.log('Page Scroll', e.scrollTop)
// 根据滚动位置处理逻辑
},
// 10. 页面尺寸变化时触发（仅微信小程序和H5支持）
onResize(size) {
console.log('Page Resize', size)
}
}
三、组件生命周期（Vue组件）
UniApp 组件完全支持 Vue 组件的生命周期：
export default {
// 1. 组件创建前（不能访问this）
beforeCreate() {
console.log('Component beforeCreate')
},
// 2. 组件创建完成（可以访问this）
created() {
console.log('Component created')
},
// 3. 组件挂载前（DOM未生成）
beforeMount() {
console.log('Component beforeMount')
},
// 4. 组件挂载完成（DOM已生成）
mounted() {
console.log('Component mounted')
},
// 5. 组件更新前
beforeUpdate() {
console.log('Component beforeUpdate')
},
// 6. 组件更新完成
updated() {
console.log('Component updated')
},
// 7. 组件销毁前
beforeDestroy() {
console.log('Component beforeDestroy')
},
// 8. 组件销毁完成
destroyed() {
console.log('Component destroyed')
}
}
四、生命周期执行顺序
1. 首次加载时的执行顺序
App.onLaunch → App.onShow → Page.onLoad → Page.onShow → Page.onReady → Component.beforeCreate → Component.created → Component.beforeMount → Component.mounted
2. 页面跳转时的执行顺序
A Page.onHide → B Page.onLoad → B Page.onShow → B Page.onReady
3. 返回时的执行顺序
B Page.onUnload → A Page.onShow
五、特殊平台的生命周期
1. App 平台特有
onBackPress: 监听页面返回
onBackPress(options) {
console.log('Back Press', options)
// 返回true表示阻止默认返回行为
if (this.formChanged) {
uni.showModal({
title: '提示',
content: '内容未保存，确定要返回吗？'
})
return true
}
}
2. 微信小程序特有
六、最佳实践
- 数据请求：推荐在
onLoad中发起初始数据请求
onLoad(options) {
this.loadData(options.id)
}
- DOM操作：必须在
onReady或mounted之后进行
onReady() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select('#element').boundingClientRect(data => {
console.log('元素位置', data)
}).exec()
})
}
- 页面通信：利用
onShow处理返回参数
onShow() {
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('acceptData', data => {
console.log('接收数据', data)
})
}
- 资源释放：在
onUnload或beforeDestroy中清理资源
onUnload() {
clearInterval(this.timer)
this.socket && this.socket.close()
}
理解 UniApp 的生命周期对于开发高质量的跨平台应用至关重要，合理利用生命周期函数可以优化性能、管理资源和提升用户体验。
No Comments