问题：uni-app 页面生命周期函数有哪些？

Question

在使用 uni-app 进行跨平台开发时，页面生命周期函数是控制页面加载、显示、隐藏和卸载的重要机制。常见的技术问题包括：**uni-app 页面生命周期函数有哪些？它们的执行顺序是怎样的？在不同平台（如 H5、小程序、App）上的表现是否一致？如何在 onReady 中操作 DOM？onLoad 和 onShow 的区别是什么？是否可以在页面生命周期中发起网络请求或操作全局状态？** 掌握这些生命周期函数及其适用场景，有助于开发者优化页面性能、提升用户体验，并确保在多端运行时行为一致。

Answer 1

一、uni-app 页面生命周期函数概览

uni-app 提供了一套统一的页面生命周期函数，用于控制页面的加载、显示、隐藏和卸载等行为。这些生命周期函数包括：

• onLoad：页面加载时触发，一个页面只会调用一次。
• onShow：页面显示时触发，每次页面显示都会调用。
• onReady：页面初次渲染完成时触发，一个页面只会调用一次。
• onHide：页面隐藏时触发。
• onUnload：页面卸载时触发。

此外，还有与页面滚动、下拉刷新、页面转发等相关的函数，如：onPageScroll、onPullDownRefresh、onShareAppMessage等。

二、生命周期函数的执行顺序

在页面首次加载时，生命周期函数的执行顺序如下：

1. onLoad
2. onShow
3. onReady

当页面从后台切换到前台时，会再次触发 onShow；而当页面被关闭时，会触发 onHide 和 onUnload。

下面是一个页面从加载到卸载的完整流程图：

graph TD
    A[页面加载] --> B(onLoad)
    B --> C(onShow)
    C --> D(onReady)
    D --> E[页面可见]
    E --> F[用户隐藏页面]
    F --> G(onHide)
    G --> H[页面卸载]
    H --> I(onUnload)

三、不同平台上的生命周期行为差异

uni-app 支持多端运行，包括 H5、小程序、App 等平台。不同平台在生命周期行为上存在细微差异：

生命周期函数	H5	小程序	App（Vue3）
onLoad	支持	支持	支持
onShow	支持	支持	支持（注意页面栈行为）
onReady	支持	支持	支持
onHide	支持	支持	支持
onUnload	支持	支持	支持（注意页面销毁逻辑）

例如，在小程序中，页面栈最多只能保留10层，超出后会触发 onUnload；而在 App 中，页面可能因内存回收而被销毁。

四、onReady 中操作 DOM 的注意事项

onReady 是页面初次渲染完成后的回调函数，适合在此阶段操作 DOM 元素或调用第三方插件。

export default {
  onReady() {
    // 使用 uni.createSelectorQuery 获取 DOM 节点
    uni.createSelectorQuery()
      .select('#myElement')
      .boundingClientRect(res => {
        if (res) {
          console.log('元素宽度：', res.width);
        }
      })
      .exec();
  }
}

需要注意的是，在 H5 平台可以直接操作 DOM，但在小程序中必须使用 uni-app 提供的 API，如 createSelectorQuery。

五、onLoad 与 onShow 的区别

onLoad 和 onShow 是两个常被混淆的生命周期函数，它们的区别如下：

• onLoad：页面加载时调用一次，适合做初始化操作，如获取页面参数、发起网络请求。
• onShow：页面显示时调用，每次页面显示都会触发，适合做页面刷新、状态同步等操作。

例如，当用户从页面 A 跳转到页面 B 后再返回 A，onShow 会被再次调用，而 onLoad 不会。

六、生命周期中发起网络请求与操作全局状态

在页面生命周期中发起网络请求是非常常见的操作，通常推荐在 onLoad 或 onShow 中进行。

export default {
  onLoad() {
    uni.request({
      url: 'https://api.example.com/data',
      success: res => {
        this.dataList = res.data;
      }
    });
  }
}

同时，uni-app 支持全局状态管理，可以通过 globalData 或使用 Vuex（在 App 端）进行状态共享。

const app = getApp();
export default {
  onShow() {
    app.globalData.userInfo = this.userInfo;
  }
}

需要注意的是，在小程序中使用全局状态应避免频繁修改，以减少性能损耗。