Uni-app 生命周期与钩子:程序的“生命”旅程

Uni-app 生命周期与钩子

  • 一、应用生命周期 (App Lifecycle)
    • onLaunch
      • 什么时候触发?
      • 常用场景?
    • onShow
      • 什么时候触发?
      • 常用场景?
    • onHide
      • 什么时候触发?
      • 常用场景?
    • onError
      • 什么时候触发?
      • 常用场景?
    • onPageNotFound
      • 什么时候触发?
      • 常用场景?
    • onUnhandledRejection
      • 什么时候触发?
      • 常用场景?
    • onThemeChange
      • 什么时候触发?
      • 常用场景?
  • 二、页面生命周期 (Page Lifecycle)
    • onLoad(options)
      • 什么时候触发?
      • 常用场景?
    • onShow
      • 什么时候触发?
      • 常用场景?
    • onReady
      • 什么时候触发?
      • 常用场景?
    • onHide
      • 什么时候触发?
      • 常用场景?
    • onUnload
      • 什么时候触发?
      • 常用场景?
    • onPullDownRefresh
      • 什么时候触发?
      • 常用场景?
    • onReachBottom
      • 什么时候触发?
      • 常用场景?
    • onShareAppMessage(options)
      • 什么时候触发?
      • 常用场景?
    • onShareTimeline()
      • 什么时候触发?
      • 常用场景?
    • onPageScroll(object)
      • 什么时候触发?
      • 常用场景?
    • onResize(object)
      • 什么时候触发?
      • 常用场景?
    • onTabItemTap(object)
      • 什么时候触发?
      • 常用场景?
    • onBackPress(options) (+uni.navigateBack)
      • 什么时候触发?
      • 常用场景?
    • onNavigationBarButtonTap(object)
      • 什么时候触发?
      • 常用场景?
  • 三、组件生命周期 (Component Lifecycle) - Vue 3 Composition API
    • setup()
      • 什么时候触发?
      • 常用场景?
    • onBeforeMount(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onMounted(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onBeforeUpdate(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onUpdated(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onBeforeUnmount(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onUnmounted(() => { ... })
      • 什么时候触发?
      • 常用场景?
    • onErrorCaptured((err, instance, info) => { ... })
      • 什么时候触发?
      • 常用场景?

你可以把一个 Uni-app 页面或组件想象成一个有生命的物体。从它被“出生”到“死亡”,会经历一系列重要的阶段,每个阶段都有一些特定的“事情”会发生。这些“事情”就是我们说的“生命周期钩子”(或者叫“生命周期函数”)。

通俗来说:生命周期钩子就是在页面或组件的特定时刻,你可以插入自己的代码来执行一些操作。

Uni-app 有两种主要的生命周期:

  1. 应用生命周期 (App Lifecycle): 整个小程序的生命。
  2. 页面生命周期 (Page Lifecycle): 某个“页面”的生命。
  3. 组件生命周期 (Component Lifecycle): 某个“组件”的生命(Vue3 Setup 风格下,组件生命周期和页面生命周期很多是共享的)。

一、应用生命周期 (App Lifecycle)

这指的是 整个 Uni-app 应用(小程序/H5/App) 的生命周期。它们在 App.vue 文件中定义。

onLaunch

什么时候触发?

最开始,App 第一次启动的时候。 整个应用只会触发一次。无论你从哪个页面进入、从小程序码、分享链接进入,都是第一次启动,就会调用。

常用场景?

  1. 获取用户信息或登录: 第一次启动时尝试静默登录,或者获取用户的基本信息(如 uni.login() 获取 code)。
  2. 全局配置初始化: 设置一些全局变量、主题配置等。
  3. 检查更新: 小程序如果有新版本,在这里提示用户。
  4. 加载全局数据: 比如从缓存中读取一些 App 级别的数据。

onShow

什么时候触发?

App 启动或从后台进入前台的时候。 比如你把小程序切到微信聊天界面,再切回来,就会触发。

常用场景?

  1. 统计用户活跃: 记录用户每次进入 App 的时间。
  2. 检查网络状态: 每次切回前台时,确保网络连接正常。
  3. 刷新数据: 如果你在后台修改了一些数据(比如个人信息),切回前台时可能需要刷新页面显示。
  4. 检查消息通知: 从后台切回时,检查是否有新的消息需要提示。

onHide

什么时候触发?

App 从前台进入后台的时候。 比如小程序切到微信聊天,或者点击了 Home 键。

常用场景?

  1. 保存数据: 用户离开时需要保存一些临时数据(如购物车状态、草稿)。
  2. 清除定时器: 停止一些不必要的后台运行,节省资源。
  3. 暂停音乐/视频播放。

onError

什么时候触发?

App 运行过程中发生错误的时候。 比如 JavaScript 运行时错误或网络请求失败。

常用场景?

  1. 错误监控和上报: 收集运行时的错误信息,发送到服务器进行分析和修复。

onPageNotFound

什么时候触发?

用户尝试打开一个不存在的页面路径。

常用场景?

  1. 自定义 404 页面: 可以重定向到首页或一个专门的错误页面,提升用户体验。

onUnhandledRejection

什么时候触发?

Promise 被拒绝,且没有 catch 处理器时触发。

常用场景?

  1. Promise 错误捕获: 统一处理 Promise 链中未被捕获的错误。

onThemeChange

什么时候触发?

用户切换主题时触发(深色模式/浅色模式)。仅微信小程序支持。

常用场景?

  1. 动态调整界面颜色: 根据用户选择的主题色,调整 App 的界面样式。

二、页面生命周期 (Page Lifecycle)

这指的是 某个具体页面 的生命周期。它们在每个 .vue 页面文件中定义(在

你可能感兴趣的:(uni-app,vue)