关于vue生命周期

父子组件生命周期执行顺序? v2 v3

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

|---------------|-------------------|
| Vue2生命周期 | Vue3生命周期 |
| beforeCreate | setup |
| created | created |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmounted |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
| errorCaptured | onErrorCaptured |


小程序

全局生命周期:

  • **onLaunch:**第一次全局执行。
  • **onShow:**第一次执行,或者关闭后重新打开后执行。
  • **onHide:**关闭小程序,但是没完全关闭,切换到后台。
  • **onError:**小程序报错。

页面生命周期:

  • **onLoad:**当前页面第一次加载的时候。
  • **onShow:**第一次执行当前页面,或者关闭后重新打开后执行。
  • **onReady:**当渲染页(视图层-wxml)加载完毕执行。
  • **onHide:**关闭当前页面,但是没完全关闭,切换到后台。
  • **onUnload:**销毁当前页。
  • **onPullDownRefresh:**下拉刷新。
  • **onReachBottom:**页面触底时执行,一般用于做上拉加载。
  • **onShareAppMessage:**分享页面执行。
  • **onPageScroll:**当前页面滚动执行。
  • **onResize:**放大缩小页面的时候执行。
  • **onTabItemTap:**点击底部导航栏触发。

组件生命周期:

  • **created:**创建组件时执行。
  • **attached:**被插入到父组件节点时执行。
  • **ready:**渲染完后执行。
  • **moved:**移动组件节点。
  • **detached:**从父组件节点移除时执行。
  • **error:**组件方法抛出错误时执行。

uni-app 生命周期

uniapp 生命周期是以小程序生命周期为基础实现的,分为应用生命周期、页面生命周期、组件生命周期。 其中组件生命周期就是 vue 生命周期。

应用生命周期:

  • **onLaunch:**当 uniapp 初始化完成时调用 (只触发一次)。
  • **onShow:**当 uniapp 启动或从后台进入前台时发生调用 (监听用户进入小程序)。
  • **onHide:**当 uniapp 从前台进入后台时发生调用 (监听用户离开小程序)。
  • **onError:**当 uniapp 报错时被触发。
  • onUniNViewMessage: 对 nvue 页面的数据进行监听。
  • **onUnhandledRejection:**对未处理的 Promise 拒绝事件进行监听。
  • **onPageNotFound:**页面不存在监听函数。
  • **onThemeChange:**监听系统主题的变化。

页面生命周期:

  • **onLoad:**监听页面加载。
  • **onShow:**监听页面显示 (每次页面显示都触发)。
  • onReady: 监听页面初次渲染完成。
  • **onHide:**监听页面隐藏。
  • **onUnload:**监听页面卸载。
  • **onResize:**监听窗口尺寸的变化。
  • **onPullDownRefresh:**监听用户下拉动作。
  • **onReachBottom:**监听页面上拉触底事件。
  • **onTabItemTab:**点击 TabBar 时触发。
  • **onShareApplessage:**点击右上角分析时触发。
  • **onShareTimeline:**点击右上角转发到朋友圈时触发。
  • **onAddToFavorites:**点击右上角收藏时触发。
  • **onPageScroll:**监听页面滚动。
  • **onNavigationBarButtonTap:**监听标题栏按钮点击事件。
  • **onNavigationBarSearchInputchanged:**监听标题栏搜索输入框输入内容变化事件。
  • **onNavigationBarSearchInputClicked:**监听标题栏搜索输入框点击事件。
  • **onBackPress:**监听用户点击右上角收藏。

组件生命周期:

uniapp 的组件生命周期和 Vue 标准组件生命周期相同。在当前版本的 uniapp中,你既可以选择使用 vue2 进行开发,也可以使用 vue3 进行开发,可以参考 vue2 和 vue3 的生命周期。

相关推荐
2501_9159214320 小时前
详细教程:使用Perfdog工具测量iOS应用的功耗性能与优化方法
android·macos·ios·小程序·uni-app·cocoa·iphone
梦曦i21 小时前
uni-app、uni-app x 与 Flutter 深度对比:2026年跨平台开发框架选型指南
flutter·uni-app·uni-app x
计算机毕设定制辅导-无忧学长21 小时前
《基于微信小程序的校园文化活动报名与管理系统》
java·spring boot·微信小程序·uniapp·校园文化活动报名与管理小程序
普马萨特2 天前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app
Geek_Vison2 天前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器
计算机毕设定制辅导-无忧学长2 天前
《校园食堂在线订餐小程序的设计与实现》
java·vue.js·spring boot·微信小程序·uniapp·校园食堂在线订餐小程序
郑州光合科技余经理3 天前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程
2501_915909064 天前
iOS应用从开发到上架App Store的完整发布流程与步骤指南
android·ios·小程序·https·uni-app·webview
不爱说话郭德纲4 天前
从“点点点”到一键出包:我把 uni-app x Android 离线打包做成了脚本
android·前端·uni-app
snotJam4 天前
关于Uniapp的Android自定义基座使用
android·uni-app