UniApp 生命周期中高级面试题

一、应用生命周期高级应用

1.1 多生命周期混合调用场景

在复杂应用中，应用生命周期与页面/组件生命周期混合使用时，执行顺序如下：

1. ‌冷启动场景‌：

   • onLaunch → onShow → 首页onLoad → 首页onShow → 首页onReady

2. ‌热启动场景‌（从后台切回）：

   • onShow → 当前页onShow

3. ‌页面跳转场景‌：

   • 原页onHide → 新页onLoad → 新页onShow → 新页onReady

// 典型混合使用案例
App({
  onLaunch(options) {
    console.log('App Launch', options.path) // 获取启动参数
  },
  onShow(options) {
    console.log('App Show', options.scene) // 场景值分析
  }
})

1.2 特殊生命周期深度解析

• ‌onError‌：可捕获应用级错误，但无法捕获Promise异常（需配合onUnhandledRejection）
• ‌onPageNotFound‌：需返回重定向路径对象 { path: '/404', query: {}, isEntry: false }
• ‌onThemeChange‌：监听系统主题变化，需在pages.json中配置"darkmode": true

二、页面生命周期高级特性

2.1 生命周期执行机制

1. ‌onInit vs onLoad‌：

   • onInit触发更早且仅执行一次，适合提前初始化数据
   • onLoad携带完整页面参数，适合业务逻辑初始化

2. ‌onBackPress‌：

   • 返回true可阻止默认返回行为
   • 支持异步操作（需返回Promise）

export default {
  onBackPress() {
    if(this.formChanged) {
      return new Promise((resolve) => {
        uni.showModal({
          content: '是否放弃编辑?',
          success: (res) => {
            resolve(res.confirm)
          }
        })
      })
    }
  }
}

2.2 性能优化相关生命周期

1. ‌onReachBottom‌：需配合onPageScroll实现高性能分页加载

   let isLoading = false
   onReachBottom() {
     if(!isLoading) {
       isLoading = true
       this.loadMore().finally(() => isLoading = false)
     }
   }
   

2. ‌onPullDownRefresh‌：需在pages.json配置"enablePullDownRefresh": true

3. ‌onResize‌：响应窗口尺寸变化，常用于PC端适配

三、组件生命周期特殊场景

3.1 原生组件生命周期

• ‌mounted‌：此时DOM未完全渲染完成（需使用$nextTick）
• ‌beforeDestroy‌：在uniapp中可能不会触发（推荐使用页面级onUnload）

3.2 自定义组件扩展生命周期

通过behaviors实现复用逻辑：

// loading-behavior.js
export default Behavior({
  pageLifetimes: {
    show() {
      this.startLoading()
    },
    hide() {
      this.stopLoading()
    }
  }
})

四、高级面试问题示例

4.1 原理类问题

1. ‌问‌：UniApp如何实现多端生命周期统一？
   ‌答‌：通过编译器将Vue生命周期映射到各平台原生生命周期，如小程序onLoad对应created，App端通过原生事件桥接实现
2. ‌问‌：onLaunch和onShow的options参数有何区别？
   ‌答‌：onLaunch仅获取冷启动参数，onShow可获取所有启动方式（扫码、scheme等）的参数

4.2 实战类问题

1. ‌问‌：如何实现页面跳转时的数据预加载？
   ‌答‌：在onLoad前使用onInit初始化数据，或利用全局事件总线提前触发数据请求
2. ‌问‌：如何处理多个页面共享的滚动位置记忆？
   ‌答‌：在onHide保存滚动位置，onShow恢复，或使用keep-alive组件（仅H5端）

五、生命周期调试技巧

5.1 性能分析工具

1. ‌开发者工具Timeline‌：分析各生命周期耗时

2. ‌自定义日志系统‌：

   const lifeLog = []
   const originPage = Page
   Page = function(config) {
     Object.keys(config).forEach(key => {
       if(key.startsWith('on')) {
         const fn = config[key]
         config[key] = function(...args) {
           const start = Date.now()
           fn.apply(this, args)
           lifeLog.push({
             event: key,
             duration: Date.now() - start
           })
         }
       }
     })
     return originPage(config)
   }
   

5.2 常见问题解决方案

问题现象	可能原因	解决方案
onLoad不触发	页面未注册或路由错误	检查pages.json配置
onShow重复执行	嵌套路由或自定义导航栏	使用状态锁控制
组件生命周期异常	原生组件限制	改用自定义组件或页面事件