uni-app的生命周期

在uni-app中的也存在着生命周期，vue和react的生命周期一样。理解uni-app的生命周期，可以帮助我们更好的书写代码，以及优化性能。

一、整体的架构概述

uni-app的生命周期主要分为应用级、页面级、组件级三个层次，分别对应不同的使用场景：

• 应用生命周期：控制整个应用的启动，前后台的切换以及销毁、
• 页面生命周期：管理单页页面的加载、渲染和卸载
• 组件生命周期：处理组件的创建、挂载和销毁（与vue的组件生命周期基本一样）

二、核心生命周期

1、应用生命周期（App.vue）

• onlaunch
  • 触发时机：应用初始化是执行（全局就一次）
  • 用途：初始化全局数据（如用户信息、配置参数）、检查登录状态
  • 示例：

onLaunch() {// 检查本地存储的 tokenconst token = uni.getStorageSync('token');if (!token) uni.navigateTo({ url: '/pages/login' });
}- 

• onshow
  • 触发时机：应用从前台切换到后台时触发
  • 用途：保存未提交的数据、暂停动画或网络请求

2、页面生命周期（页面的组件）

• onLoad
  • 触发时机：页面加载时触发，接受路径参数（如id=1）
  • 用途 ： 初始化也米娜数据，根据参数请求接口
  • 示例：

 onLoad(options) {this.articleId = options.id;this.fetchArticleData(options.id); // 根据 ID 获取文章详情
}

• onReady

  • 触发时机：页面初次渲染完成时触发（类似Vue的mounted）
  • 用途 ： 操作Dom（如获取节点信息）、初始化第三方插件

• onShow

  • 触发时机：页面显示时触发（每次打开页面都会执行）
  • 用途 ：刷新也米娜数据（如列表页的最新数据）。

• onHide：

  • 触发时机：页面隐藏时触发（如跳转到其他页面）
  • 用途 ： 暂停定时器、取消未完成的请求

• onUnload

  • 触发时机：页面销毁时触发（如调佣uni.navigateBack()）
  • 用途 ： 释放资源（如清除缓存、解绑事件）。

3、组件生命周期（与vue一致）

• created：实例初始化后触发，数据观测和 event/watcher 事件配置完成。
• mounted：模板渲染完成后触发，可访问 DOM 元素。
• updated：数据更新导致 DOM 重新渲染后触发。
• destroyed：组件销毁前触发，可执行清理工作。

三、高频面试问题解答

1. 应用生命周期 vs 页面生命周期

• 应用生命周期：全局唯一，控制整个应用的状态。
• 页面生命周期：每个页面独立存在，管理页面的显示与隐藏。
• 场景举例：
  用户登录状态检查应放在 App.vue 的 onLaunch 中。
  页面数据刷新应放在 onShow 中（如返回列表页时刷新数据）。

2. onReady 和 mounted 的区别

• onReady：uni-app 特有的页面生命周期，表示页面初次渲染完成。
• mounted：Vue 组件的生命周期，表示组件挂载完成。
  注意：在 uni-app 中，建议优先使用 onReady 操作页面 DOM。

3. 如何优化生命周期中的性能？

• 避免在 onShow 中频繁请求数据：可通过缓存或时间戳判断是否需要刷新。
• 及时清理资源：在 onUnload 中取消定时器、监听事件和未完成的请求。
• 使用全局状态管理：复杂数据在应用生命周期初始化，避免重复获取。

四、结合项目的最佳实践

场景示例：电商 APP 的商品详情页

• onLoad：获取商品ID，请求商品详情数据
• onReady：初始化轮播图插件或瀑布流布局。
• onShow：检查用户是否登录（若未登录，跳转到登录页）。
• onHide：暂停商品评论的实时刷新。
• onUnload：清除商品图片缓存，避免占用过多内存