当前位置: 首页 > news >正文

uniapp生命周期vue生命周期有何异同?

uni-app 是基于 Vue.js 开发的,其生命周期与 Vue 生命周期有一定的关联和区别,下面为你详细介绍:

相同点
本质关联:uni-app 基于 Vue.js 开发,所以 uni-app 组件的生命周期与 Vue 标准组件的生命周期相同,都支持 Vue 的模板语法、指令、组件、生命周期钩子函数等,也可以使用 vue 的数据绑定、计算属性、方法、生命周期钩子等 。
不同点

  1. 生命周期类型不同
    uni-app:有应用生命周期、页面生命周期和类似 Vue 的组件生命周期。其中,应用生命周期仅在 App.vue 中监听,用于监听 uni-app 应用的全局状态,如 onLaunch、onShow、onHide 等;页面生命周期用于监听页面的加载、显示、隐藏等状态,如 onLoad、onShow、onReady 等 。
    Vue:主要是组件的生命周期,用于管理组件从创建到销毁的整个过程,如 beforeCreate、created、beforeMount、mounted 等 。
  2. 部分钩子函数的对应关系和功能差异
    uni-app 生命周期 功能说明 Vue 生命周期 功能说明 对应关系
    onLoad 监听页面加载,其参数为上个页面传递的数据,用于页面传参 created 实例被创建之后执行代码,可进行数据的初始化操作 created 可替换为 onLoad
    onReady 监听页面初次渲染完成 mounted 实例被挂载完成后执行代码 mounted 可替换为 onReady
    onShow 监听页面显示,页面每次出现在屏幕上都触发 - - 无直接对应
    onHide 监听页面隐藏 - - 无直接对应
    onUnload 监听页面卸载 beforeDestroy、destroyed 在解除绑定、销毁子组件以及事件监听器前后执行代码 有一定关联
    总体而言,uni-app 在 Vue 生命周期的基础上,增加了应用和页面层面的生命周期钩子,以满足跨平台开发中对应用和页面状态管理的需求。

在这里插入图片描述

相关文章:

  • XDP/eBPF来包过滤-已上机验证
  • UniApp 生命周期钩子的应用场景
  • es6什么是暂时性死区,为何会存在
  • 买卖股票的最佳时机(js实现,LeetCode:121)
  • 大模型tokenizer重构流程
  • el-date-picker时间范围 编辑回显后不能修改问题
  • RedisTemplate和RedissonClient适用的场景有什么不同
  • 2025年优化算法:龙卷风优化算法(Tornado optimizer with Coriolis force,TOC)
  • 48days强训——day2
  • Axure RP9教程 :轮播图(动态面板) | 头部锁定
  • Python---数据分析(Pandas八:二维数组DataFrame数据操作一: 数据清洗,数据转换)
  • 掌握C#循环:for、while、break与continue详解及游戏案例
  • QT网络通信的接口与使用
  • 城电科技|景观光伏花 太阳能发电的景观光伏太阳花向日葵
  • 高校校园交友微信小程序的设计与实现【lw+源码+部署+讲解】
  • 接口自动化框架篇:自定义异常日志封装!
  • 【T2I】Divide Bind Your Attention for Improved Generative Semantic Nursing
  • 基于QT(C++)实现绘图程序
  • 枪机AI人工智能的识别镜头图像技术
  • 深入理解指针(1)(C语言版)
  • 19世纪的“表征之场”:弗洛伊德的精神分析椅
  • 纽约市长称墨西哥海军帆船撞桥事故已致2人死亡
  • 解锁儿时愿望!潘展乐战胜孙杨,全国冠军赛男子400自夺冠
  • 霍步刚任辽宁沈阳市委书记
  • 银行积分大幅贬值遭质疑,涉及工行、中行、农行等
  • “16+8”“生酮饮食”,网红减肥法究竟靠谱吗?