您的位置:

uniapp生命周期详解

一、uniapp生命周期概述

uniapp生命周期是指整个应用从启动到结束期间,经历了一系列的阶段,每个阶段都会调用对应的生命周期函数,这些函数可以用来处理一些与业务相关的逻辑。通常将uniapp的生命周期分为三大类:

  • 应用整体生命周期:uni-app应用整体运行期间的生命周期(包括应用启动到退出),由uni-app框架自动触发执行。
  • 组件生命周期:组件运行期间的生命周期,由uni-app框架自动触发执行。
  • 页面生命周期:页面运行期间的生命周期,由uni-app框架自动触发执行。

二、uniapp生命周期函数说明

uniapp提供了十多个生命周期函数,用于在应用运行的不同阶段处理不同的逻辑。下面我们来看看这些函数的具体作用。

1. 应用整体生命周期函数

1.1 beforeCreate

在应用初始化之后,数据观测和事件配置之前被调用。这个阶段工作的主要目的是初始化应用所需的基础设置。


export default {
  beforeCreate() {
    console.log('应用启动之前');
  }
}

1.2 created

在实例创建完成之后调用,完成数据的观测等初始化工作。注意,此时组件还没有被挂载到页面中。


export default {
  created() {
    console.log('应用创建完成');
  }
}

1.3 beforeMount

在挂载开始之前被调用:相关的render函数首次被调用。


export default {
  beforeMount() {
    console.log('应用挂载之前');
  }
}

1.4 mounted

在挂载结束时被调用,此时组件已经被渲染到页面中。注意,mounted不会保证所有子组件也都一起被挂载到页面中。


export default {
  mounted() {
    console.log('应用挂载完成');
  }
}

1.5 beforeUpdate

在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该过程中进一步地更改状态,并且不会触发附加的重渲染过程。


export default {
  beforeUpdate() {
    console.log('数据即将更新');
  }
}

1.6 updated

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。


export default {
  updated() {
    console.log('数据更新完成');
  }
}

1.7 beforeDestroy

在实例被销毁之前调用。这里可以进行一些清理工作。


export default {
  beforeDestroy() {
    console.log('应用即将被销毁');
  }
}

1.8 destroyed

在实例被销毁之后调用,此时组件已经被销毁,所有指令及事件监听器都已经被解除,所有子实例也已经被销毁。


export default {
  destroyed() {
    console.log('应用销毁完成');
  }
}

2. 组件生命周期函数

2.1 beforeCreate

在组件实例化之后,在数据观测之前被调用。

2.2 created

在组件实例化完成之后被立即调用。

2.3 beforeMount

在挂载开始之前被调用:相关的render函数首次被调用。

2.4 mounted

在挂载结束时被调用,此时组件已经被渲染到页面中。注意,mounted不会保证所有子组件也都一起被挂载到页面中。

2.5 beforeUpdate

在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该过程中进一步地更改状态,并且不会触发附加的重渲染过程。

2.6 updated

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

2.7 beforeDestroy

在组件实例被销毁之前调用,在这里可以进行一些清理工作。

2.8 destroyed

在组件实例被销毁之后调用。

3. 页面生命周期函数

3.1 onInit

页面实例化时触发,只调用一次。

3.2 onLoad

页面加载时触发,只调用一次。

3.3 onReady

页面渲染完成时触发,只调用一次。

3.4 onShow

页面出现在前台时触发。

3.5 onHide

页面从前台变为后台时触发。

3.6 onUnload

页面卸载时触发。

3.7 onPullDownRefresh

监听用户下拉动作。

3.8 onReachBottom

页面上拉触底事件的处理函数。

3.9 onShareAppMessage

页面被用户分享时触发。

3.10 onResize

页面尺寸改变时触发。

三、uniapp生命周期函数执行顺序

uniapp生命周期函数执行顺序按照从父组件到子组件、从外到内的顺序进行。

四、uniapp生命周期函数异步请求问题

uniapp生命周期函数内的异步请求不会阻塞页面渲染。比如,在beforeCreated中发起异步请求,页面会渲染完毕后异步请求的回调会被触发。

五、uniapp组件生命周期和页面生命周期的异同

从生命周期的阶段划分上,组件的生命周期比页面的生命周期要丰富。组件生命周期包含的阶段有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等,而页面生命周期只包含了onLoad、onReady、onShow、onHide和onUnload等。

六、uniapp生命周期面试题

6.1 uniapp中钩子函数的含义和调用顺序是什么?

uniapp中的钩子函数是在应用运行周期中被调用的函数。调用顺序按照从父组件到子组件、从外到内的顺序进行。

6.2 uniapp生命周期中哪些函数可以发起异步请求?

在uniapp生命周期函数中,除了beforeCreate和created函数外,其他函数都是可以发起异步请求的。

6.3 uniapp生命周期函数中beforeDestroy函数可以用来做什么?

在beforeDestroy函数中我们可以进行一些清理工作,比如取消订阅、清除定时器等操作,防止因为页面销毁而导致的内存泄漏。


export default {
  beforeDestroy() {
    clearInterval(this.timer);
    this.unsubscribe && this.unsubscribe();
  } 
}

6.4 uniapp中页面生命周期函数的执行顺序是怎样的?

uniapp中页面生命周期函数的执行顺序是onLoad -> onReady -> onShow -> onHide -> onUnload。

6.5 uniapp组件生命周期与vue组件生命周期有什么不同?

uniapp组件生命周期比vue组件生命周期要丰富一些,uniapp组件生命周期包含的阶段有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等,而vue组件生命周期没有beforeCreate和beforeDestroy两个钩子函数。