UniApp生命周期完全指南」：从应用启动到页面卸载，全过程详细解读 「UniApp新手教程」：学会应用、页面与组件生命周期，开发更高效的跨平台应用 UniApp生命周期最全解析！手把手带你构建一个高

博客正文

UniApp生命周期新手教程：从应用到组件，轻松掌握每个环节

UniApp 的生命周期函数是每个开发者必须掌握的重要知识点，它不仅帮助我们管理页面和数据，还可以提升应用的性能和用户体验。这篇文章将详细讲解 UniApp 的 应用生命周期、页面生命周期 和 组件生命周期，并通过代码示例，带你逐步理解如何在实际开发中灵活运用这些生命周期函数。

---

目录

1. 什么是生命周期？
2. 应用生命周期
   • onLaunch
   • onShow
   • onHide
   • onError
   • onPageNotFound
3. 页面生命周期
   • onLoad
   • onShow
   • onReady
   • onHide
   • onUnload
   • onPullDownRefresh
   • onReachBottom
   • onShareAppMessage
4. 组件生命周期
   • beforeCreate
   • created
   • beforeMount
   • mounted
   • beforeUpdate
   • updated
   • beforeDestroy
   • destroyed
5. 总结与常见问题

---

什么是生命周期？

生命周期指的是在应用、页面或组件运行期间，从创建到销毁所经历的所有阶段。UniApp 为我们提供了许多内置的生命周期函数，可以在这些特定时间点执行操作，例如初始化数据、监听事件、释放资源等。

为什么学习生命周期如此重要？

• 更好地管理数据和状态。
• 优化性能，比如避免不必要的资源占用。
• 提升用户体验，如实现加载动画、错误提示等。

---

应用生命周期

应用生命周期函数用于监听整个应用的启动、关闭、切换前后台等状态。它们需要在 App.vue 文件中定义。

onLaunch

onLaunch 在应用初始化完成时触发，只会触发一次，是应用的起点。

示例：

export default {
  onLaunch() {
    console.log('App Initialized');
    // 初始化操作，例如获取用户信息或配置
  }
};

适用场景：

• 初始化全局变量。
• 获取用户登录状态或设置应用主题。

---

onShow

onShow 在应用启动或从后台切换到前台时触发。

示例：

export default {
  onShow() {
    console.log('App is in foreground');
    // 刷新页面或获取实时数据
  }
};

适用场景：

• 切换到前台时更新页面数据，例如消息通知。

---

onHide

onHide 在应用从前台切换到后台时触发。

示例：

export default {
  onHide() {
    console.log('App is in background');
    // 暂停定时器或保存用户进度
  }
};

适用场景：

• 保存用户未完成的任务或暂停音频播放。

---

onError

onError 在应用发生错误时触发，可以捕获到 JavaScript 错误。

示例：

export default {
  onError(err) {
    console.error('Error:', err);
    // 错误监控或用户提示
  }
};

适用场景：

• 捕获异常并上报错误。

---

onPageNotFound

当用户打开一个不存在的页面时触发。

示例：

export default {
  onPageNotFound(res) {
    console.log('Page Not Found:', res);
    // 重定向到首页
    uni.reLaunch({ url: '/pages/index/index' });
  }
};

---

页面生命周期

页面生命周期函数控制的是页面的加载、显示、隐藏等行为。这些函数需要在页面的 .vue 文件中定义。

onLoad

onLoad 在页面加载时触发，并接受上一个页面传递的参数。

示例：

export default {
  onLoad(options) {
    console.log('Page Loaded:', options);
    // 例如根据参数获取数据
  }
};

适用场景：

• 初始化页面数据。
• 根据 URL 参数决定页面内容。

---

onShow

onShow 在页面每次显示时触发，包括从其他页面返回。

示例：

export default {
  onShow() {
    console.log('Page Shown');
    // 刷新数据
  }
};

---

onReady

onReady 在页面初次渲染完成后触发。

示例：

export default {
  onReady() {
    console.log('Page Ready');
    // 初始化第三方库，例如图表
  }
};

---

onHide

onHide 在页面隐藏时触发。

示例：

export default {
  onHide() {
    console.log('Page Hidden');
    // 停止定时器
  }
};

---

onUnload

onUnload 在页面卸载时触发。

示例：

export default {
  onUnload() {
    console.log('Page Unloaded');
    // 清理资源
  }
};

---

组件生命周期

组件生命周期与 Vue 的生命周期基本一致。

beforeCreate

组件实例刚刚创建，还未初始化时触发。

示例：

export default {
  beforeCreate() {
    console.log('Component Before Create');
  }
};

---

mounted

组件挂载到页面上后触发。

示例：

export default {
  mounted() {
    console.log('Component Mounted');
  }
};

---

总结与常见问题

• 生命周期函数执行顺序是什么？
  应用生命周期 → 页面生命周期 → 组件生命周期。

• 如何调试生命周期？
  在每个生命周期函数中添加 console.log 查看触发顺序。

---

参考代码

完整示例可参考以下代码：

export default {
  onLaunch() { console.log('App Initialized'); },
  onLoad(options) { console.log('Page Loaded:', options); },
  onShow() { console.log('Page Shown'); },
};

希望这篇教程能帮助你更好地理解 UniApp 的生命周期！

---

【定制化开发服务，让您的项目领先一步】

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

---