UniAPP和Vue3生命周期hook

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('组件销毁');// 清理定时器等资源}
}