uniApp生命周期

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

一、应用生命周期钩子

复制代码
 1 onLaunch(options):应用初始化时触发,全局只触发一次。
 2 App({
 3   onLaunch: function(options) {
 4   // 应用初始化时执行的代码
 5   }
 6 })
 7 onShow(options):应用启动或从后台进入前台时触发。
 8 App({
 9   onShow: function(options) {
10   // 应用从后台进入前台时执行的代码
11   }
12 })
13 onHide():应用从前台进入后台时触发。
14 App({
15   onHide: function() {
16   // 应用从前台进入后台时执行的代码
17   }
18 })
复制代码

二、页面生命周期钩子

复制代码
 1 onLoad(options):页面加载时触发,可以获取页面参数。
 2 export default {
 3   onLoad(options) {
 4   // 页面加载时执行的代码,可以使用options参数获取页面参数
 5   }
 6 }
 7 onShow():页面显示时触发。
 8 export default {
 9   onShow() {
10   // 页面显示时执行的代码
11   }
12 }
13 onReady():页面初次渲染完成时触发。
14 export default {
15   onReady() {
16   // 页面初次渲染完成时执行的代码
17   }
18 }
19 onHide():页面隐藏时触发。
20 export default {
21   onHide() {
22   // 页面隐藏时执行的代码
23   }
24 }
25 onUnload():页面卸载时触发。
26 export default {
27   onUnload() {
28   // 页面卸载时执行的代码
29   }
30 }
复制代码

三、组件生命周期钩子

复制代码
 1 beforeCreate():组件实例刚刚被创建,属性计算和方法定义之前触发。
 2 export default {
 3   beforeCreate() {
 4   // 组件实例被创建时执行的代码
 5   }
 6 }
 7 created():组件实例已经创建完成,属性已经绑定,但尚未替换真实的DOM之前触发。
 8 export default {
 9   created() {
10   // 组件实例创建完成时执行的代码
11   }
12 }
13 beforeMount():组件挂载开始之前执行。
14 export default {
15   beforeMount() {
16   // 组件挂载开始之前执行的代码
17   }
18 }
19 mounted():组件挂载到页面之后执行。
20 export default {
21   mounted() {
22   // 组件挂载到页面之后执行的代码
23   }
24 }
25 beforeUpdate():组件更新开始之前执行。
26 export default {
27   beforeUpdate() {
28   // 组件更新开始之前执行的代码
29   }
30 }
31 updated():组件更新完成之后执行。
32 export default {
33   updated() {
34   // 组件更新完成之后执行的代码
35   }
36 }
37 beforeDestroy():组件销毁前执行。
38 export default {
39   beforeDestroy() {
40   // 组件销毁前执行的代码
41   }
42 }
43 destroyed():组件销毁后执行。
44 export default {
45   destroyed() {
46   // 组件销毁后执行的代码
47   }
48 }
复制代码

 

posted @   record-100  阅读(317)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示