vue,小程序,uni-app的生命周期?

Vue、小程序和Uni-App都有各自的生命周期,下面是它们的生命周期介绍:

Vue 的生命周期

Vue 的生命周期分为创建、挂载、更新和销毁四个阶段,具体的生命周期函数如下:

  1. beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好 data 和 methods 属性。

  2. created:实例已经在内存中创建完成,data 和 methods 属性已经完成初始化。可以进行数据的操作,如异步请求数据。

  3. beforeMount:在挂载开始之前被调用,此时 Vue 实例的模板已经编译完成,但尚未挂载到页面中。

  4. mounted:实例挂载到页面后调用,此时可以进行 DOM 操作,如获取元素节点。

  5. beforeUpdate:数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进行更新前的操作。

  6. updated:数据更新之后调用,发生在虚拟 DOM 重新渲染和打补丁之后。可以在该钩子中进行更新后的操作。

  7. beforeDestroy:实例销毁之前调用。在这个阶段,实例仍然完全可用。

  8. destroyed:实例销毁后调用。此时,Vue 实例的所有指令、事件监听器都已经被移除,组件也会被销毁。

小程序的生命周期

小程序的生命周期分为创建、更新和销毁三个阶段,具体的生命周期函数如下:

  1. onLoad:页面加载时触发,可以获取页面参数。

  2. onShow:页面显示/切入前台时触发,每次打开页面都会触发。

  3. onReady:页面初次渲染完成时触发,可以进行页面元素操作。

  4. onHide:页面隐藏/切入后台时触发。

  5. onUnload:页面卸载时触发。

  6. onPullDownRefresh:用户下拉刷新时触发。

  7. onReachBottom:页面上拉触底时触发。

  8. onShareAppMessage:用户点击右上角分享时触发。

Uni-App 的生命周期

Uni-App 的生命周期与 Vue 的生命周期基本一致,除了增加了一些平台特有的生命周期函数,具体的生命周期函数如下:

  1. onLaunch:应用初始化时触发,全局只触发一次。

  2. onShow:应用启动或从后台进入前台时触发。

  3. onHide:应用从前台进入后台时触发。

  4. onError:应用发生脚本错误或 API 调用失败时触发。

  5. onUniNViewMessage:接收从 nvue 页面发送过来的数据。

需要注意的是,Uni-App 是基于 Vue 的跨平台框架,所以它的生命周期函数与 Vue 的生命周期函数大部分是一致的。而小程序是一种独立的开发框架,其生命周期函数与 Vue 和 Uni-App 有所不同。

相关推荐
小码编匠30 分钟前
Three.js 遇上 Vue3 开发现代化 3D 可视化编辑系统
vue.js·typescript·three.js
说私域1 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的零售流量重构研究
人工智能·小程序·开源
鹧鸪云光伏与储能软件开发3 小时前
光伏开发小程序:快速获客,成交项目更迅速
大数据·微信小程序·小程序·光伏
麦麦大数据3 小时前
F043 vue+flask天气预测可视化系统大数据+机器学习+管理端+爬虫+超酷界面+顶级可视化水平 【黑色版】
大数据·vue.js·flask·天气预测·气温预测·天气大数据·天气可视化
专注前端30年4 小时前
Vue CLI与Webpack:区别解析与实战使用指南
前端·vue.js·webpack
微风怎知我意4 小时前
前端框架入门怎么选?一篇搞懂 Vue、React、Angular 的取舍之道
vue.js·react.js·前端框架
麦麦大数据4 小时前
F043 vue+flask天气预测可视化系统大数据(浅色版)+机器学习+管理端+爬虫+超酷界面+顶级可视化水平
大数据·vue.js·机器学习·flask·空气质量·天气预测·气温预测
晨旭缘5 小时前
解决小程序滚动穿透问题
小程序
杨筱毅5 小时前
【技术选型】前端框架:Vue vs React - 组合式API与Hooks的哲学之争
vue.js·react.js·前端框架·技术选型
游戏开发爱好者87 小时前
iOS 崩溃日志分析工具全指南,多工具协同构建稳定性分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone