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
},

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐