UniApp生命周期

发布时间 2023-12-09 18:43:58作者: record-100

当使用UniApp开发框架时,你可以利用一些生命周期钩子函数来控制页面和组件的初始化、加载和销毁过程。以下是UniApp中的所有生命周期钩子函数以及使用方法和注释解析:

一、应用生命周期钩子
onLaunch(options):应用初始化时触发,全局只触发一次。
App({
onLaunch: function(options) {
// 应用初始化时执行的代码
}
})
onShow(options):应用启动或从后台进入前台时触发。
App({
onShow: function(options) {
// 应用从后台进入前台时执行的代码
}
})
onHide():应用从前台进入后台时触发。
App({
onHide: function() {
// 应用从前台进入后台时执行的代码
}
})
二、页面生命周期钩子
onLoad(options):页面加载时触发,可以获取页面参数。
export default {
onLoad(options) {
// 页面加载时执行的代码,可以使用options参数获取页面参数
}
}
onShow():页面显示时触发。
export default {
onShow() {
// 页面显示时执行的代码
}
}
onReady():页面初次渲染完成时触发。
export default {
onReady() {
// 页面初次渲染完成时执行的代码
}
}
onHide():页面隐藏时触发。
export default {
onHide() {
// 页面隐藏时执行的代码
}
}
onUnload():页面卸载时触发。
export default {
onUnload() {
// 页面卸载时执行的代码
}
}
三、组件生命周期钩子
beforeCreate():组件实例刚刚被创建,属性计算和方法定义之前触发。
export default {
beforeCreate() {
// 组件实例被创建时执行的代码
}
}
created():组件实例已经创建完成,属性已经绑定,但尚未替换真实的DOM之前触发。
export default {
created() {
// 组件实例创建完成时执行的代码
}
}
beforeMount():组件挂载开始之前执行。
export default {
beforeMount() {
// 组件挂载开始之前执行的代码
}
}
mounted():组件挂载到页面之后执行。
export default {
mounted() {
// 组件挂载到页面之后执行的代码
}
}
beforeUpdate():组件更新开始之前执行。
export default {
beforeUpdate() {
// 组件更新开始之前执行的代码
}
}
updated():组件更新完成之后执行。
export default {
updated() {
// 组件更新完成之后执行的代码
}
}
beforeDestroy():组件销毁前执行。
export default {
beforeDestroy() {
// 组件销毁前执行的代码
}
}
destroyed():组件销毁后执行。
export default {
destroyed() {
// 组件销毁后执行的代码
}