关于vue生命周期

devtools/2024/11/14 1:13:17/

父子组件生命周期执行顺序? 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 的生命周期。


http://www.ppmy.cn/devtools/133277.html

相关文章

乐尚代驾十订单支付seata、rabbitmq异步消息、redisson延迟队列

账单信息 司机结束代驾之后,生成账单(包含账单信息和分账信息)司机发送账单给乘客乘客获取账单之后,进行支付 获取账单信息 order_bill表记录的账单信息,我们直接获取即可 Operation(summary "根据订单id获取…

JavaScript:loadScript 方法

一、loadScript 解释 在JavaScript中,loadScript 方法通常用于动态地加载一个外部JavaScript脚本。这种方法常用于需要根据某些条件(如用户交互、页面加载完成后的某些操作等)动态引入脚本的场景。 二、实现代码 function loadScript(url,…

协程6 --- HOOK

文章目录 HOOK 概述链接运行时动态链接 linux上的常见HOOK方式修改函数指针用户态动态库拦截getpidmalloc 第一版malloc 第二版malloc/free通过指针获取到空间大小malloc 第三版strncmp 内核态系统调用拦截堆栈式文件系统 协程的HOOK HOOK 概述 原理:修改符号指向 …

pip常用命令

不常用pip用到的时候总是到处找命令,大多罗列不全或者布局不喜欢,特此收集在博文中,以供查找。 pip 是 Python 的包管理工具,用于安装、管理和卸载 Python 包。以下是 pip 的一些常用命令及其详细解释: 安装包 安装单…

《Linux运维总结:基于银河麒麟V10+ARM64架构CPU部署redis 6.2.14 TLS/SSL哨兵集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、简介 Redis 哨兵模式是一种高可用性解决方案,它通过监控 Redis 主从架构,自动执行故障转移,从而确保服务的连续性。哨兵模式的核心组件包括哨兵(Sentine…

Mac电脑如何解压rar压缩包

group 868373192 second group 277356808 在 macOS 上解压 RAR 文件,你可以使用以下几种方法: 方法 1: 使用 The Unarchiver 下载并安装 The Unarchiver: 你可以从 Mac App Store 下载 The Unarchiver。 解压 RAR 文件: 找到你想要解压的 RAR 文件。 …

docker镜像文件导出导入

1. 导出容器(包含内部服务)为镜像文件(docker commit方法) 原理:docker commit命令允许你将一个容器的当前状态保存为一个新的镜像。这个新镜像将包含容器内所有的文件系统更改,包括安装的软件、配置文件等…

2024-11-11-Linux学习-基础篇(1)(鸟哥的LINUX私房菜 第四章)

Linux的学习,也是一本大厚书,学起来。 文章目录 一、前言二、知识点2.1 开始执行命令2.2 日期与时间2.3 日历2.4 计算器2.4 重要的热键2.4.1 [TAB]2.4.2 [Ctrl]-c2.4.3 [Ctrl]-d2.4.4 [Shift]{[Page UP]l[ Page Down]}按键 小结 一、前言 Linux命令学习&…