uni-app生命周期和vue的生命周期(关于uniapp和Vue的生命周期)
什么是生命周期?
前端的升命周期一般指的是 ,一个页面 、一个网站从创建开始 ,到应用关闭 ,走过的一个流程 。就像人的一生一样 ,从出生 ,到工作 ,到死去 。
生命周期有什么用?
生命周期的意义在于 ,可以实时把控住页面等对象在生命周期的各个过程中的状态 。
比如一个页面 ,在创建前会调用beforeCreat方法 ,我们可以在这个方法中做出页面加载前的准备工作 。VUE的生命周期
beforeCreat
() :顾名思义是在页面被创建前时调用的方法 ,在new一个vue实例后 ,只有一些默认的生命周期钩子和默认事件 ,其他的东西都还没创建 。在此生命周期执行的时候,data和methods中的数据都还没有初始化 。不能在这个阶段使用data中的数据和methods中的方法
created(): 对象被创建后会调用created方法 ,这时页面已经被创建 ,数据已经初始化完成
beforeMount() : 挂载前,在内存中已经编译好了模板了 ,但是还没有挂载到页面中 ,此时 ,页面还是旧的 。
mounted():挂载后 ,Vue实例已经初始化完成了 。此时组件脱离了创建阶段 ,进入到了运行阶段 。 如果我们想要通过插件操作页面上的DOM节点 ,最早可以在和这个阶段中进行 。
beforeupdate() :页面更新前 ,页面中的显示的数据还是旧的 ,data中的数据是更新后的 , 页面还没有和最新的数据保持同步
updated():页面更新后 ,页面显示的数据和data中的数据已经保持同步了 ,都是最新的 。
beforeDestroy() :页面销毁前 ,Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令 , 过滤器 ……都是处于可用状态 。还没有真正被销毁
destroyed():页面销毁后, 这个时候上所有的 data 和 methods , 指令 , 过滤器 ……都是处于不可用状态。组件已经被销毁了所以其实简单来说就是:创建前后 => 挂载前后 => 更新前后 => 销毁前后
uniapp的生命周期
uniapp是基于vue的一个框架 ,uniapp的生命周期分为三种:
APP生命周期 ,页面生命周期 ,组件生命周期
其中组件生命周期是和vue的生命周期是一样的 。
其中暂时只需要了解关于进入 、关闭 、隐藏这种的生命周期 ,我已经讲重要的和不重要的分割开 ,对于不重要的生命周期不要求记下来 ,只需要知道大概有这么一个东西 ,用到的时候查就可以了 。APP的生命周期:
onLaunch
: 当uni-app 初始化完成时触发(全局只触发一次)
onShow: 当 uni-app 启动 ,或从后台进入前台显示(显示页面的时候触发)
onHide: 当 uni-app 从前台进入后台(隐藏/退出页面的时候触发)
onError: 当 uni-app 报错时触发onUniNViewMessage
: 对 nvue 页面发送的数据进行监听
onUnhandledRejection: 对未处理的 Promise 拒绝事件监听函数
onPageNotFound: 页面不存在监听函数
onThemeChange: 监听系统主题变化页面生命周期:
onInit
监听页面初始化 ,其参数同 onLoad 参数 ,触发时机早于 onLoad
onLoad监听页面加载,其参数为上个页面传递的数据 ,参数类型为 Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发 ,包括从下级页面点返回当前页面
onReady监听页面初次渲染完成 。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
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的 APP的生命周期举例:
<script> export default { onLaunch: function() { console.log(App Launch) }, onShow: function() { console.log(App Show) }, onHide: function() { console.log(App Hide) } } </script>创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!