一次性学懂原生小程序、uniapp小程序的生命周期以下是原生小程序与 UniApp 小程序生命周期的对比总结，分为应

以下是原生小程序与 UniApp 小程序生命周期的对比总结，分为 应用级、页面级、组件级 三个层级，并提炼核心差异点，方便记忆与开发参考：

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

💡 记忆口诀：
“启显隐错丢页面”（启动、显示、隐藏、错误、页面丢失）
UniApp 注意 H5 无效（onShow/onHide/onPageNotFound 在 H5 不触发）。

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

原生小程序：
onLoad → onShow → onReady → onHide → onUnload
UniApp：
beforeCreate → created → onLoad → onShow → beforeMount → onReady → mounted

关键点：UniApp 插入 Vue 生命周期（beforeCreate/created 在 onLoad 前），DOM 操作需放 mounted（等价 onReady 后）。

💡 记忆口诀：
“载显备卸”（加载、显示、准备渲染、卸载）
UniApp “Vue 插队”（Vue 钩子插入 onLoad 前）。

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

💡 记忆口诀：
原生**“创附离”**（创建、附加、脱离），UniApp “跟 Vue 走”（Vue 全周期）。
页面状态监听：原生用 pageLifetimes，UniApp 用 activated/deactivated。

应用级：
- 两者共有的 onLaunch/onShow/onHide，UniApp 注意 H5 无效。
页面级：
- 原生顺序：“载显备卸”（Load-Show-Ready-Hide-Unload）。
- UniApp 顺序：“Vue 插队，载显备卸”（Vue 钩子 + 小程序钩子混合）。
组件级：
- 原生记 “创附离”（Created-Attached-Detached）。
- UniApp 直接复用 Vue 生命周期（created/mounted/destroyed）。
避坑指南：
- UniApp 的 onShow/onHide 在 H5 无效，改用路由守卫或 activated/deactivated。
- 避免在 UniApp 组件中使用 onLoad，统一用 Vue 钩子（如 created 初始化）。

通过分层对比和口诀记忆，可快速掌握两者核心差异。实际开发中，UniApp 更适合跨平台快速迭代，原生小程序适合深度微信集成与高性能场景。

一次性学懂 原生小程序、uniapp小程序的生命周期