Uniapp 生命周期

一只前端仔

2025-04-01 188 阅读2分钟

最近在写uniapp项目时，发现uniapp的生命周期和Vue的生命周期有点不一样。Uniapp 的生命周期包括应用生命周期、页面生命周期和组件生命周期三部分，它兼容了 Vue 的生命周期，同时加入了小程序特有的生命周期。

一、应用生命周期（App.vue）

onLaunch - 当uni-app初始化完成时触发（全局只触发一次）
onShow - 当uni-app启动，或从后台进入前台显示
onHide - 当uni-app从前台进入后台
onError - 当uni-app报错时触发
onUniNViewMessage - 对 nvue 页面发送的数据进行监听
onUnhandledRejection - 对未处理的 Promise 拒绝事件监听函数
onPageNotFound - 页面不存在监听函数
onThemeChange - 监听系统主题变化

// App.vue
export default {
  onLaunch(options) {
    console.log('App Launch', options)
  },
  onShow(options) {
    console.log('App Show', options)
  },
  onHide() {
    console.log('App Hide')
  }
}

二、页面生命周期（页面.vue）

onLoad - 监听页面加载，参数为上个页面传递的数据
onShow - 监听页面显示
onReady - 监听页面初次渲染完成
onHide - 监听页面隐藏
onUnload - 监听页面卸载
onPullDownRefresh - 监听用户下拉动作
onReachBottom - 页面上拉触底事件的处理函数
onShareAppMessage - 用户点击右上角分享
onPageScroll - 监听页面滚动
onNavigationBarButtonTap - 监听原生标题栏按钮点击事件
onBackPress - 监听页面返回
onResize - 监听窗口尺寸变化

export default {
  onLoad(options) {
    console.log('页面加载', options)
  },
  onShow() {
    console.log('页面显示')
  },
  onReady() {
    console.log('页面初次渲染完成')
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
}

三、组件生命周期（Vue组件）

Uniapp 组件支持 Vue 的所有生命周期：

beforeCreate - 实例初始化之后
created - 实例创建完成后
beforeMount - 挂载开始之前
mounted - 挂载到实例上去之后
beforeUpdate - 数据更新时
updated - 数据更新之后
beforeDestroy - 实例销毁之前
destroyed - 实例销毁之后

export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  created() {
    console.log('组件实例创建完成')
  },
  mounted() {
    console.log('组件挂载完成')
  }
}

四、特殊平台生命周期

onTabItemTap - 点击 tab 时触发
onNavigationBarSearchInputChanged - 监听原生标题栏搜索输入框输入内容变化
onNavigationBarSearchInputConfirmed - 监听原生标题栏搜索输入框搜索事件
onNavigationBarSearchInputClicked - 监听原生标题栏搜索输入框点击事件

五、生命周期执行顺序

应用启动：

- App.onLaunch → App.onShow → 页面.onLoad → 页面.onShow → 页面.onReady

页面切换：

- A页面.onHide → B页面.onLoad → B页面.onShow → B页面.onReady → A页面.onUnload(如果是关闭A页面)

组件加载：

- 父beforeCreate → 父created → 父beforeMount → 子beforeCreate → 子created → 子beforeMount → 子mounted → 父mounted

理解这些生命周期有助于在合适的时机执行相应的业务逻辑，如数据初始化、资源释放等操作。