vue的生命周期、uni-app页面生命周期
vue的生命周期uni-app页面生命周期(uni-app支持vue的生命周期)onLoad 和 onShow 的区别
·
vue的生命周期
4大阶段8个钩子
生命周期 | 在该生命周期发生了什么 |
beforeCreate | 实例刚被创建出来,data,methods还没有初始化 |
created | 实例创建完成,data和methods已经创建完成 |
beforeMount | 完成模板编译,只是还没有渲染到页面上 |
mounted | 渲染到页面上 |
beforeUpdate | 界面中的数据还是旧的,但是data里面的数据已经修改 |
updated | 页面重新渲染完毕,数据也更新了 |
beforeDestroy | 已经进入销毁状态,但是数据还处于可用状态 |
Destroyed | 组件已经销毁,vue实例也被销毁,vue中的数据都不可用 |
在被keep-alive包含的组件/路由中,有两个生命周期的钩子:actived与deactived,
actived在组件第一次渲染时会被调用,之后在每次缓存组件是调用,
deactived是组件被停用时被调用
新增属性:include:被缓存;exclude:不会被缓存 exclude的优先级大于include
error
uni-app页面生命周期(uni-app支持vue的生命周期)
生命周期 | 说明 |
onLoad(常用) | 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参) |
onShow(常用) | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
onHide | 监听页面隐藏 |
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
onUnload | 监听页面卸载 |
onResize | 监听窗口尺寸变化 |
onBackPress | 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。 |
onPageScroll | 监听页面滚动,参数为Object |
... | ... |
onLoad 和 onShow 的区别
onLoad页面加载时调用,可以获取参数,通过options,在页面的整个生命周期里,只执行一次
onShow页面显示时调用,在页面的整个生命周期中,可以执行多次,即每次显示都会执行
onLoad优先于onShow执行
主要区别:
从二级页面返回该页面时,onLoad不会再次加载,onShow会重新加载
1. 如果加载列表页,二级页面对一级的列表页面内容有修改,则以及列表函数应该在onShow中加载,否则可以选择onLoad
2.如果从一个页面携带参数跳转到另外一个页面,在另外一个页面获取参数方式:
//在另外一个页面获取参数方式:
onLoad(options){
console.log(options.xxx) // 这些参数都挂载在options
},
更多推荐
所有评论(0)