vue和uniapp的调度和运行都是基于生命周期来实现的,说白了就是一个应用或者页面的创建到关闭所经过的每一个流程,就像人的一生从出生、工作到死去的过程。
uniapp其实是基于vue构建的一个应用,它实现了一套代码可以多端发布,省去了很多的底层的知识的了解,并减轻了很多的重复工作,这是非常有意义的。
下面我用表格来对照下两者的生命周期,其实差别不大,主要是生命周期的方法名不同罢了。
vue | vue中的介绍 |
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等生命周期了。