Uniappx 生命周期详解：从启动到销毁，搞懂每个阶段的奥秘

内容摘要：Uniappx 生命周期详解：从启动到销毁，搞懂每个阶段的奥秘,

在 Uniappx 开发中，理解各个生命周期至关重要。它决定了你的应用在不同阶段的行为，直接影响用户体验和应用性能。本文将深入探讨 Uniappx 的几个关键生命周期，并通过实际案例分析，助你掌握 Uniappx 生命周期的正确用法，避免常见的坑。

页面生命周期

onLoad(options)

页面加载时触发。这是获取页面参数 options 的最佳时机，比如通过 URL 传递的参数。可以利用这些参数初始化页面数据。

export default {
  onLoad(options) {
    console.log('页面加载', options); // 打印传递的参数
    this.setData({
      param1: options.param1 || 'default value' // 使用默认值避免 undefined
    })
  }
}

实战避坑： 确保 options 中的参数存在，否则提供默认值，避免程序出错。可以考虑使用 ?. 可选链操作符进一步避免 undefined 错误。

onShow()

页面显示/切入前台时触发。可以理解为页面变得可见的时候。常用于刷新数据，例如用户登录后刷新用户信息。

export default {
  onShow() {
    console.log('页面显示');
    // 刷新用户信息
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      // 调用后端接口获取用户信息
      uni.request({
        url: '/api/user/info',
        success: (res) => {
          this.userInfo = res.data;
        }
      });
    }
  }
}

实战避坑： 避免在 onShow 中执行耗时操作，影响页面显示速度。如果需要执行耗时操作，可以使用 setTimeout 或 async/await 异步执行。

onReady()

页面初次渲染完成时触发。此时页面结构已经渲染完成，可以进行 DOM 操作（虽然在 Uniappx 中不推荐直接操作 DOM）。通常用于获取组件实例，执行一些初始化动画等。

export default {
  onReady() {
    console.log('页面渲染完成');
    // 获取自定义组件实例
    const myComponent = this.$refs.myComponent;
    if (myComponent) {
      myComponent.init();
    }
  }
}

实战避坑： 确保组件已经渲染完成再获取组件实例，否则可能获取不到。可以使用 uni.nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。

onHide()

页面隐藏/切入后台时触发。可以理解为页面变得不可见的时候。常用于暂停动画，保存临时数据等。

export default {
  onHide() {
    console.log('页面隐藏');
    // 停止动画
    this.stopAnimation();
    // 保存临时数据到本地存储
    uni.setStorageSync('tempData', this.data.tempData);
  }
}

实战避坑： 不要在此生命周期中执行长时间阻塞的操作，否则可能导致应用卡顿。

onUnload()

页面卸载时触发。常用于清理定时器，取消订阅等。

export default {
  data() {
    return {
      timer: null
    }
  },
  onUnload() {
    console.log('页面卸载');
    // 清理定时器
    clearInterval(this.timer);
    this.timer = null;
  }
}

实战避坑： 务必在此生命周期中清理所有资源，避免内存泄漏。

应用生命周期

onLaunch()

应用启动时触发。全局只触发一次。常用于初始化全局数据，进行登录验证等。

onShow()

应用显示/切入前台时触发。与页面生命周期的 onShow 类似，但作用域是整个应用。

onHide()

应用隐藏/切入后台时触发。与页面生命周期的 onHide 类似，但作用域是整个应用。

onError()

应用发生错误时触发。可以用于收集错误日志，进行错误上报。

onUniNViewMessage()

当使用 uni-app x 时，native 容器向 uni-app 发送消息时触发。

组件生命周期

组件生命周期与 Vue 组件类似，包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。此处不再赘述，可以参考 Vue 官方文档。

掌握 Uniappx 生命周期是开发高质量 Uniappx 应用的关键。希望本文能够帮助你更好地理解和使用 Uniappx 的各个生命周期。