Uniapp生命周期详解

一、Uniapp生命周期有哪些

Uniapp生命周期共有6个，分别是：应用生命周期、页面生命周期、组件生命周期、模板指令生命周期、Vue实例生命周期、App生命周期。这里我们主要讲解前三个生命周期：应用生命周期、页面生命周期、组件生命周期。

二、Uniapp生命周期钩子

Uniapp生命周期钩子是Vue实现的，当生命周期被触发时，会执行相关的钩子函数。这里我们以应用生命周期onLaunch为例，介绍一下钩子函数的使用方法。

export default {
  onLaunch(options) {
    // 应用启动时执行的函数
  },
  onShow(options) {
    // 当应用从后台进入前台显示时执行的函数
  },
}

三、Uniapp生命周期执行顺序

Uniapp生命周期执行顺序分为两部分，前半部分是应用生命周期和页面生命周期，后半部分是组件生命周期。具体执行顺序如下：

应用生命周期：beforeCreate -> created -> beforeMount -> mounted -> onLaunch -> onShow

页面生命周期：beforeRouteEnter -> beforeEach -> beforeCreate -> created -> beforeMount -> mounted -> onShow

组件生命周期：beforeCreate -> created -> beforeMount -> mounted -> onShow

四、Uniapp生命周期函数

下面我们来介绍一下Uniapp生命周期相关的函数：

1、getCurrentPages()：获取当前页面栈的实例。

2、Page()：注册页面，传入一个对象，包含页面所需的数据、生命周期等。

3、Component()：注册组件，传入一个对象，包括组件属性、生命周期等。

4、Vue()：创建Vue实例，包括其特有的生命周期函数。

五、Uniapp生命周期方法

Uniapp生命周期方法分为两部分，即页面和组件的生命周期方法。

以下是页面的生命周期方法：

1、onLoad()：页面加载时触发。

2、onShow()：页面展示时触发，包含从其他页面返回、刷新页面等。

3、onReady()：页面渲染完成时触发。

4、onHide()：页面隐藏时触发。

5、onUnload()：页面卸载时触发。

以下是组件的生命周期方法：

1、created()：组件创建完毕时触发。

2、attached()：组件载入页面时触发。

3、ready()：组件渲染完成时触发。

4、moved()：组件被移动时触发。

5、detached()：组件从页面移除时触发。

六、Uniapp生命周期网络请求

下面我们来介绍一下Uniapp生命周期相关的网络请求。在onLaunch生命周期中可以进行一些全局性的网络请求操作，例如用户登录验证等。

export default {
  onLaunch(options) {
    uni.request({
      url: 'xxx',
      method: 'POST',
      data: {
        ...
      },
      success: function (res) {
        console.log(res.data)
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },
}

七、Uniapp生命周期面试题

1、请简述Uniapp生命周期有哪些。

2、请简述Uniapp生命周期钩子的使用方法。

3、请简述Uniapp生命周期执行顺序。

4、请简述Uniapp生命周期函数和生命周期方法有哪些，分别是用来干什么的？

5、在Uniapp生命周期中，什么时候可以进行网络请求操作？

八、Uniapp官网

Uniapp官网提供了详细的Uniapp生命周期文档和使用教程，可以供开发者进行参考。官网地址：https://uniapp.dcloud.io/

九、Uniapp和原生开发区别

Uniapp可以进行跨平台开发，一次编写服务于多个平台，可以在不同的平台上运行使用，而原生开发只能针对某一平台进行开发，需要分别开发，并且开发难度较大，所需投入时间和精力也比较高。

十、Uniapp组件生命周期

在Uniapp组件的生命周期中，我们可以使用created、attached、ready、moved、detached这些组件生命周期函数。常用的有attached和detached，可以在组件载入前和卸载后进行一些操作，包括数据请求、数据处理等，可以增强组件的应用性和用户体验。

这里我们来举个例子：

export default {
  data() {
    return {
      list: []
    }
  },
  attached() {
    uni.request({
      url: 'xxx',
      method: 'POST',
      data: {
        ...
      },
      success: (res) => {
        this.list = res.data.list
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },
  detached() {
    // 卸载时清空数据
    this.list = []
  },
}