原生小程序（微信小程序）与 UniApp 生命周期的详细对比

以下是原生小程序（微信小程序）与 UniApp 生命周期的详细对比，涵盖应用级、页面级和组件级的关键差异及适用场景，结合执行顺序和平台特性总结：

---

📱 一、应用级生命周期对比

生命周期	原生小程序	UniApp	差异说明
onLaunch	✅ 小程序初始化完成时触发（全局一次）	✅ 同小程序，三端兼容	行为一致，均用于全局初始化（如登录检测）
onShow	✅ 从后台进入前台时触发	✅ 同小程序，但 H5 平台无效	UniApp 的 onShow 在 H5 不触发
onHide	✅ 从前台进入后台时触发	✅ 同小程序，H5 无效	同上
onError	✅ 脚本错误或 API 报错时触发	✅ 支持，但 APP-uvue 模式不支持	UniApp 对部分平台有限制
onPageNotFound	✅ 页面不存在时触发	✅ 仅 APP 和小程序平台有效	UniApp 在 H5 无此钩子

开发建议：

• UniApp 需注意跨平台兼容性（如 onShow/onHide 在 H5 失效），必要时用 Vue 生命周期替代。

---

📄 二、页面级生命周期对比

1. 核心生命周期函数

生命周期	原生小程序	UniApp	替代关系
onLoad	✅ 页面加载时触发（接收参数）	✅ 行为一致	等价于 Vue 的 created，但更早触发
onShow	✅ 页面显示时触发（多次）	✅ 同小程序，H5 无效	UniApp 中可用 Vue 的 activated 替代
onReady	✅ 页面初次渲染完成时触发（一次）	✅ 行为一致	等价于 Vue 的 mounted
onHide	✅ 页面隐藏时触发	✅ 同小程序，H5 无效	—
onUnload	✅ 页面卸载时触发（如 redirectTo）	✅ 行为一致	等价于 Vue 的 beforeDestroy

2. 执行顺序差异

• 原生小程序：
  onLoad → onShow → onReady → onHide → onUnload
• UniApp：
  beforeCreate → created → onLoad → onShow → beforeMount → onReady → mounted
  关键点：UniApp 在 onLoad 前插入 Vue 的 beforeCreate/created，适合数据初始化；onReady 后触发 mounted，表示 DOM 可操作。

---

🧩 三、组件级生命周期对比

生命周期	原生小程序	UniApp	差异说明
创建阶段	created（组件创建） → attached（挂载到节点树）	✅ Vue 标准：beforeCreate → created → beforeMount → mounted	UniApp 完全复用 Vue 生命周期，无小程序特有钩子
销毁阶段	detached（移出节点树）	✅ Vue 的 beforeDestroy → destroyed	小程序需用 lifetimes 字段定义
页面关联钩子	pageLifetimes（如页面显示/隐藏）	❌ 不支持	UniApp 组件需通过 Vue 的 activated/deactivated 监听页面状态

开发注意：

• UniApp 组件不可使用 onLoad、onShow 等页面钩子，需统一用 Vue 生命周期。

---

⚙️ 四、执行顺序与跨平台特性对比

1. 启动顺序示例（首页含组件）

• 原生小程序 ：
  App.onLaunch → App.onShow → Component.created → Component.attached → Page.onLoad → Page.onShow → Component.ready → Page.onReady
• UniApp ：
  App.onLaunch → App.onShow → Page.beforeCreate → Page.created → Page.onLoad → Page.onShow → Component.beforeMount → Page.onReady → Component.mounted

2. 跨平台适配

• UniApp 的 onShow/onHide 在 H5 平台无效，需改用 Vue 的 activated/deactivated 或路由守卫。
• 平台专有钩子：如 UniApp 的 onUniNViewMessage（仅 APP 端）、onLastPageBackPress（Android 返回键监听）。

---

💎 五、总结与选择建议

维度	原生小程序	UniApp
生命周期体系	独立三层（应用/页面/组件）	整合 Vue + 小程序扩展
开发一致性	仅限微信小程序	跨三端（H5/APP/小程序），但需处理平台差异
组件生命周期	自有钩子（attached/detached）	完全兼容 Vue 标准
适用场景	纯微信小程序开发	多端项目，需减少重复代码

实际建议：

• 选 原生小程序：深度依赖微信生态（如云开发）、追求极致性能。
• 选 UniApp：跨平台需求强、熟悉 Vue 技术栈、希望复用逻辑。
• 避坑指南：
  • UniApp 页面初始化用 onLoad 接收参数，DOM 操作放 mounted；
  • 组件开发一律用 Vue 生命周期（如 mounted 替代 attached）。