知识库

Appearance

uni-app 组件/应用生命周期 ​

应用生命周期 ​

uni-app 应用生命周期是指应用从启动到关闭的整个过程，包括以下几个关键阶段：

onLaunch ​

  • 触发时机：应用初始化完成时触发
  • 作用：可以在这里进行全局初始化操作，如加载全局数据、初始化SDK等
  • 参数：包含 query 参数，如通过URL启动应用时的参数

onShow ​

  • 触发时机：应用启动或从后台进入前台时触发
  • 作用：可以在这里处理页面显示相关的逻辑，如刷新数据、恢复状态等
  • 参数：包含 query 参数

onHide ​

  • 触发时机：应用从前台进入后台时触发
  • 作用：可以在这里处理页面隐藏相关的逻辑，如暂停计时器、保存状态等

onError ​

  • 触发时机：应用发生错误时触发
  • 作用：可以在这里捕获错误信息，进行错误上报等
  • 参数：错误信息对象

onUniNViewMessage ​

  • 触发时机：nvue 页面向应用发送消息时触发
  • 作用：处理 nvue 页面发送的消息
  • 参数：消息对象

页面生命周期 ​

uni-app 页面生命周期是指页面从创建到销毁的过程，包括以下几个关键阶段：

onLoad ​

  • 触发时机：页面加载时触发
  • 作用：可以在这里获取页面参数，初始化页面数据
  • 参数：包含页面参数的对象

onShow ​

  • 触发时机：页面显示时触发
  • 作用：可以在这里处理页面显示相关的逻辑，如刷新数据等

onReady ​

  • 触发时机：页面初次渲染完成时触发
  • 作用：可以在这里获取页面元素，进行DOM操作

onHide ​

  • 触发时机：页面隐藏时触发
  • 作用：可以在这里处理页面隐藏相关的逻辑

onUnload ​

  • 触发时机：页面卸载时触发
  • 作用：可以在这里清理资源，如取消定时器、解绑事件等

onResize ​

  • 触发时机：页面尺寸变化时触发
  • 作用：可以在这里处理页面尺寸变化相关的逻辑
  • 参数：包含尺寸信息的对象

onPullDownRefresh ​

  • 触发时机：用户下拉刷新时触发
  • 作用：可以在这里处理下拉刷新逻辑，如重新加载数据

onReachBottom ​

  • 触发时机：页面滚动到底部时触发
  • 作用：可以在这里处理上拉加载更多逻辑

onTabItemTap ​

  • 触发时机：点击底部tab栏时触发
  • 作用：可以在这里处理tab切换相关的逻辑
  • 参数：包含tab信息的对象

onShareAppMessage ​

  • 触发时机：用户点击分享时触发
  • 作用：可以在这里自定义分享内容
  • 返回值：分享信息对象

onPageScroll ​

  • 触发时机：页面滚动时触发
  • 作用：可以在这里处理页面滚动相关的逻辑
  • 参数：包含滚动信息的对象

onNavigationBarButtonTap ​

  • 触发时机：点击导航栏按钮时触发
  • 作用：可以在这里处理导航栏按钮点击事件
  • 参数：包含按钮信息的对象

onBackPress ​

  • 触发时机：用户点击返回按钮时触发
  • 作用：可以在这里处理返回逻辑，如拦截返回操作
  • 返回值：布尔值，true表示拦截返回，false表示不拦截

组件生命周期 ​

uni-app 组件生命周期与 Vue 组件生命周期基本一致，包括以下几个关键阶段：

beforeCreate ​

  • 触发时机：组件实例创建前触发
  • 作用：可以在这里进行组件初始化前的准备工作

created ​

  • 触发时机：组件实例创建完成时触发
  • 作用：可以在这里获取数据，初始化组件状态

beforeMount ​

  • 触发时机：组件挂载前触发
  • 作用：可以在这里进行挂载前的准备工作

mounted ​

  • 触发时机：组件挂载完成时触发
  • 作用：可以在这里获取DOM元素，进行DOM操作

beforeUpdate ​

  • 触发时机：组件更新前触发
  • 作用：可以在这里进行更新前的准备工作

updated ​

  • 触发时机：组件更新完成时触发
  • 作用：可以在这里处理更新后的逻辑

beforeUnmount ​

  • 触发时机：组件卸载前触发
  • 作用：可以在这里清理资源，如取消定时器、解绑事件等

unmounted ​

  • 触发时机：组件卸载完成时触发
  • 作用：可以在这里进行最终的清理工作

生命周期执行顺序 ​

应用启动时 ​

  1. onLaunch (应用初始化)
  2. onShow (应用显示)
  3. 页面 onLoad (页面加载)
  4. 页面 onShow (页面显示)
  5. 页面 onReady (页面渲染完成)

页面跳转时 ​

  1. 旧页面 onHide (旧页面隐藏)
  2. 新页面 onLoad (新页面加载)
  3. 新页面 onShow (新页面显示)
  4. 新页面 onReady (新页面渲染完成)

页面返回时 ​

  1. 新页面 onUnload (新页面卸载)
  2. 旧页面 onShow (旧页面显示)

生命周期注意事项 ​

应用生命周期 ​

  • onLaunch 只触发一次，在应用初始化时
  • onShow 和 onHide 会在应用前后台切换时触发
  • onError 可以捕获应用级别的错误

页面生命周期 ​

  • onLoad 只触发一次，在页面加载时
  • onShow 会在页面显示时触发，包括从后台进入前台
  • onUnload 会在页面卸载时触发，包括返回上一页
  • onPullDownRefresh 需要在页面配置中开启 enablePullDownRefresh
  • onReachBottom 需要在页面配置中设置 onReachBottomDistance

组件生命周期 ​

  • 组件生命周期与 Vue 组件生命周期一致
  • 组件实例创建后会依次执行 beforeCreate、created、beforeMount、mounted
  • 组件更新时会依次执行 beforeUpdate、updated
  • 组件卸载时会依次执行 beforeUnmount、unmounted

生命周期最佳实践 ​

数据初始化 ​

  • 应用级数据初始化放在 onLaunch
  • 页面级数据初始化放在 onLoad
  • 组件级数据初始化放在 created

资源管理 ​

  • 定时器、事件监听器等资源在 onUnload 或 unmounted 中清理
  • 页面隐藏时可以在 onHide 中暂停定时器
  • 页面显示时可以在 onShow 中恢复定时器

性能优化 ​

  • 避免在 onShow 中进行大量计算
  • 合理使用缓存，减少重复请求
  • 避免在生命周期钩子中进行复杂的DOM操作

常见问题 ​

生命周期不触发 ​

  • 检查页面路径是否正确
  • 检查组件是否正确注册
  • 检查是否有错误阻止了生命周期执行

生命周期执行顺序错误 ​

  • 了解正确的生命周期执行顺序
  • 避免在生命周期钩子中进行异步操作导致的顺序问题

性能问题 ​

  • 优化生命周期钩子中的代码
  • 避免在生命周期钩子中进行耗时操作
  • 使用防抖和节流优化频繁触发的生命周期钩子

基于 VitePress 的本地知识库

Copyright © 2026