详解uniapp的生命周期

让我来详细讲解一下Uniapp的生命周期。

什么是生命周期

生命周期指的是组件从被创建、到被销毁的整个过程，是一个组件性质的体现。在这个过程中，组件会经历不同的状态和事件。生命周期钩子函数是在组件不同的状态中被调用的函数，可以让开发者在不同的阶段添加相应的处理。

生命周期钩子函数

应用级别钩子函数

onLaunch(options)

应用初始化完成时触发，options是启动参数，可以获取到此参数。一般用于一些全局初始化操作。

onShow(options)

应用启动时或从后台进入前台时触发，options是启动参数，可以获取到此参数。一般用于获取应用启动时携带的参数，并决定相关界面的显示。

onHide()

应用从前台进入后台时触发。一般用于保存当前界面的状态或清除定时器等操作。

onError(err)

应用出现错误时触发。一般用于捕获应用错误信息并上报给服务器，以便查错和优化应用。

页面级别钩子函数

onLoad(options)

页面加载时触发，options是页面传入的参数，可以获取到此参数。一般用于请求数据并初始化页面状态。

onShow()

页面展示时触发。一般用于监听页面展示的状态并决定相关界面的显示。

onReady()

页面渲染完成时触发。一般用于可以开始进行交互的操作，如获取元素宽高等操作。

onHide()

页面从前台进入后台时触发。一般用于保存当前界面的状态或清除定时器等操作。

onUnload()

页面销毁时触发。一般用于清除定时器和监听器等操作，防止内存泄漏。

示例说明

示例一：在onLaunch中做全局初始化

App({
  onLaunch: function() {
    // 进行全局变量的初始化
    this.globalData = {
      userInfo: null,
      apiDomain: 'http://api.example.com'
    }
  }
})

在应用初始化时，我们可以通过onLaunch进行全局变量的初始化，例如上述代码中使用globalData存储用户信息和API域名，这样在其他地方就可以方便地使用。

示例二：在onLoad中请求数据并初始化页面状态

<template>
  <div>{{content}}</div>
</template>
<script>
  export default {
    data() {
      return {
        content: ''
      }
    },
    onLoad(options) {
      // 请求数据并初始化页面状态
      this.$http.get('/api/content', { params: options }).then(response => {
        this.content = response.data;
      });
    }
  }
</script>

在页面加载时，我们可以通过onLoad进行数据的请求和页面状态的初始化，例如上述代码中使用axios库进行请求并将请求结果赋值给data属性中的content变量，然后通过{{content}}插值进行渲染。