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 }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY