vue和uniapp的生命周期介绍及对比

vue和uniapp的调度和运行都是基于生命周期来实现的,说白了就是一个应用或者页面的创建到关闭所经过的每一个流程,就像人的一生从出生、工作到死去的过程。

uniapp其实是基于vue构建的一个应用,它实现了一套代码可以多端发布,省去了很多的底层的知识的了解,并减轻了很多的重复工作,这是非常有意义的。

下面我用表格来对照下两者的生命周期,其实差别不大,主要是生命周期的方法名不同罢了。

vuevue中的介绍
beforeCreat在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在此生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
created对象被创建后会调用created方法,这时页面已经被创建,数据已经初始化完成
beforeMount挂载前,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的。
mounted挂载后,Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。
beforeupdate页面更新前,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
updated页面更新后,页面显示的数据和data中的数据已经保持同步了,都是最新的。
beforeDestroy页面销毁前,Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed页面销毁后, 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了

其实vue的生命周期主要就是反映的是页面的运行过程 创建前后–》挂载前后–》更新前后–》页面销毁前后,

uniapp生命周期方法使用介绍
onInit听页面初始化,其参数同 onLoad 参数,触发时机早于 onLoad
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏(效果和onShow相反)
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
onTabItemTap点击 tab 时触发,参数为Object
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动,参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为Object
onBackPress监听页面返回
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏

uniapp中的组件支持的生命周期和vue的组件的生命周期是一样的,生命周期的命名也是一致的。同时要注意的一点是组件中没有页面级别的onLoad等生命周期了。

You May Also Like