uniapp 应用的生命周期、页面的生命周期、组件的生命周期

uniapp 作为一款跨平台的移动应用开发框架,其生命周期分为应用生命周期、页面生命周期和组件生命周期。下面分别介绍这三种生命周期的具体内容:

应用生命周期

应用生命周期仅适用于整个应用,在 App.vue 中可以监听到以下生命周期函数:

  • onLaunch:当应用启动完成时触发,全局只触发一次。
  • onShow:当应用启动或从后台进入前台显示时触发。
  • onHide:当应用从前台进入后台时触发。
  • onUnload:当应用从内存中卸载时触发。
  • onError:当应用发生脚本错误或API异常时触发。

页面生命周期

页面生命周期函数在 pages.json 中配置的页面有以下几个:

  • onLoad:页面加载时触发,参数 options 包含了页面路径和参数。
  • onShow:页面显示时触发,每次页面出现在屏幕上都会触发。
  • onReady:页面首次渲染完成时触发,相当于 Vue 中的 mounted
  • onHide:页面隐藏时触发,如页面跳转或被其他页面遮盖。
  • onUnload:页面卸载时触发,如页面关闭。

组件生命周期

组件生命周期函数在组件内部定义,与 Vue 组件的生命周期类似:

  • beforeCreate:在实例初始化之后、数据观测和事件配置之前被调用。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成数据观测、属性和方法的运算,watch/event 事件回调已设置,但是挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted:挂载完成后被调用。el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
  • beforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。适用于在现有DOM应用一些更新条件时使用。
  • updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用这个钩子。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
相关推荐
IT_陈寒4 分钟前
React useEffect依赖数组中埋的坑,这次终于让我逮到了
前端·人工智能·后端
FourAu1 小时前
2026 前端突围指南:从 ESR 边缘渲染到封装 Web AI SDK,聊聊 AI 时代的职业进化
前端·人工智能
Zkeq1 小时前
不止是聊天框:我用 EdgeOne Makers Agents 给烹饪 APP 加了一位能“改菜谱”的 AI 主厨
前端
咩咩啃树皮2 小时前
第32篇:前端本地存储全解——Cookie、localStorage、sessionStorage 区别与实战
前端
2501_916008893 小时前
苹果上架工具怎么选 不用 Mac 上架 App Store 的几种方案
android·macos·ios·小程序·uni-app·iphone·webview
腻害兔3 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 框架层:15 个 Starter 到底在干什么?
前端·vue.js·产品经理·ai编程
宠友信息3 小时前
MySQL复合索引与Druid优化仿小红书源码个人主页查询链路
数据库·spring boot·websocket·mysql·uni-app
梦想的旅途24 小时前
JavaScript 实现企业微信消息自动发送的技术实践
运维·javascript·自动化·企业微信
就叫飞六吧5 小时前
子页面和dialog案例
开发语言·javascript·ecmascript