Uni-app生命周期：执行顺序与避坑指南

今天我们要聊的是 Uni-app 的灵魂 ，也是面试最常问、新手最容易写出 Bug 的地方：生命周期（Life Cycle）。

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

---

🚀 今日份：生命周期的执行顺序与实战陷阱

很多开发者会发现：为什么我的数据还没获取到，页面就渲染完了？为什么 onLoad 拿不到组件的实例？这都是因为没理清它们的执行优先级。

💡 核心逻辑：三位一体的生命周期

1. 应用生命周期 (App.vue)

这是整个 App 的生命周期，全局只触发一次或在状态切换时触发。

• onLaunch: 当 Uni-app 初始化完成时触发（全局只一次）。适合做：登录状态校验、获取设备信息、初始化全局数据。
• onShow: App 启动或从后台进入前台时触发。
• onHide: App 从前台进入后台时触发。

2. 页面生命周期 (Pages)

这是最常用的部分，特指 pages.json 中注册的页面。

• onLoad(options) : 页面加载时触发。重点： 页面参数（如扫码进来的 ID）只能在这里拿到。适合发网络请求。
• onShow: 页面显示时触发（包括从下个页面返回）。
• onReady : 页面初次渲染完成。此时可以获取 DOM（通过 uni.createSelectorQuery）。
• onUnload: 页面卸载。适合清除定时器、销毁监听。

3. 组件生命周期 (Components)

Uni-app 的组件遵循 Vue 的生命周期。

• created: 实例创建完成，数据观测已建立，但还没挂载。
• mounted: 挂载完成。

---

⚠️ 避坑实战：执行顺序到底是怎么样的？

这是一个典型的页面包含一个子组件时的启动顺序：

1. App onLaunch (仅首屏)
2. App onShow
3. Component created (是的，子组件先创建！)
4. Page onLoad
5. Page onShow
6. Component mounted
7. Page onReady (页面最后才 Ready)

面试考点： 如果你在组件的 mounted 里依赖 onLoad 获取的数据，可能会因为异步请求未完成而报错。建议使用 watch 或 props 传值。

---

📝 常用场景演示

场景 A：页面跳转传参

// 在 A 页面跳转
uni.navigateTo({ url: '/pages/detail/detail?id=123' });

// 在 B 页面接收
export default {
    onLoad(options) {
        console.log(options.id); // 打印出 123
        this.getDetail(options.id); // 在 onLoad 发请求是性能最优解
    }
}

场景 B：处理"返回上一页"刷新数据

如果你从详情页修改了数据，返回列表页需要更新，不能写在 onLoad（因为返回不触发 onLoad），必须写在 onShow：

onShow() {
    this.refreshList(); // 每次页面露脸都会执行
}

---

💡 核心总结

1. 发请求 ：首选页面 onLoad，因为它比 onReady 早，能减少白屏时间。
2. 操纵 DOM ：必须在 onReady（页面）或 mounted（组件）之后。
3. 传参限制 ：只有页面生命周期能拿到 options 路径参数，组件拿不到。
4. 定时器 ：记得在 onUnload 里 clearInterval，否则 App 会越跑越卡。

---