uni-app的生命周期

在 uni-app 中，生命周期分为应用生命周期 、页面生命周期 和组件生命周期三大类。

一、应用生命周期

应用生命周期在 App.vue 中定义，用于监听应用从启动到关闭的整个过程。常用生命周期函数：

函数名	说明
onLaunch	应用初始化完成时触发，全局只触发一次（常用于获取用户信息、全局数据初始化等）
onShow	应用启动或从后台进入前台时触发
onHide	应用从前台进入后台时触发
onError	应用发生脚本错误或 API 调用报错时触发
onUniNViewMessage	当使用 nvue 页面时，用于接收 nvue 发送的消息

示例：

<!-- App.vue -->
<script>
export default {
  onLaunch: function() {
    console.log('App Launch');
    // 初始化全局数据、登录等
  },
  onShow: function() {
    console.log('App Show');
  },
  onHide: function() {
    console.log('App Hide');
  },
  onError: function(err) {
    console.log('App Error', err);
  }
}
</script>

二、页面生命周期

页面生命周期在页面 （pages 目录下的 .vue 文件）中定义，用于监听页面进入、渲染、退出等过程。常用生命周期函数：

函数名	说明
onLoad	页面加载时触发，参数为上一个页面传递的数据（常用于获取参数、请求数据）
onShow	页面显示时触发（每次进入页面都会触发）
onReady	页面初次渲染完成时触发（可用于操作 DOM）
onHide	页面隐藏时触发（如跳转到其他页面）
onUnload	页面卸载时触发（如关闭页面）
onPullDownRefresh	用户下拉刷新时触发（需开启 enablePullDownRefresh）
onReachBottom	页面滚动到底部时触发（常用于上拉加载更多）
onShareAppMessage	用户点击右上角分享时触发（定义分享内容）
onPageScroll	页面滚动时触发

示例：

<!-- pages/index/index.vue -->
<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  onLoad(options) {
    console.log('页面加载，参数：', options);
    // 请求数据
    this.loadData();
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  onPullDownRefresh() {
    console.log('用户下拉刷新');
    // 刷新数据后调用 uni.stopPullDownRefresh() 停止刷新
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    console.log('滚动到底部，加载更多');
  },
  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: '/static/share.png'
    };
  },
  methods: {
    loadData() {
      // 模拟请求
      setTimeout(() => {
        this.message = '数据已更新';
      }, 500);
    }
  }
}
</script>

三、组件生命周期

组件生命周期与 Vue 原生生命周期 完全一致，在 components 目录下的组件文件中使用。常用生命周期钩子：

函数名	说明
beforeCreate	实例初始化之后，数据观测之前调用
created	实例创建完成，数据观测已设置，但尚未挂载（常用于数据初始化）
beforeMount	挂载开始之前调用
mounted	组件挂载到页面后调用（可操作 DOM）
beforeUpdate	数据更新时，DOM 重新渲染前调用
updated	数据更新，DOM 重新渲染后调用
beforeDestroy	实例销毁前调用
destroyed	实例销毁后调用

示例：

<!-- components/MyComponent.vue -->
<template>
  <view>
    <text>{{ text }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '组件文本'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
}
</script>

四、生命周期执行顺序

• 应用启动时：

  1. App.onLaunch

  2. App.onShow

  3. 进入首页（假设首页是 pages/index/index）：

     • 页面 onLoad

     • 页面 onShow

     • 页面 onReady

• 页面跳转：

  1. 当前页面 onHide

  2. 新页面 onLoad → onShow → onReady

• 页面返回：

  1. 当前页面 onUnload

  2. 上一个页面 onShow

• 组件生命周期 在页面渲染过程中按顺序触发。

五、注意事项

1. 应用生命周期 仅在 App.vue 中生效，页面和组件中无法直接使用。

2. 页面生命周期 仅在 pages 目录下的页面文件中生效，普通组件中使用无效。

3. 组件生命周期 遵循 Vue 规范，在组件内部可直接使用。

4. 在 onLoad 中可以通过 options 参数获取上个页面传递的 query 参数（如 ?id=1）。

5. 使用下拉刷新时，必须在页面的 json 配置中开启 "enablePullDownRefresh": true，或通过 uni.startPullDownRefresh 手动触发。

6. 页面的 onReady 通常用于操作 DOM，但需要注意跨端兼容性（如微信小程序中 onReady 后才可以获取 DOM 节点）。