一、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两个钩子函数。