vue的生命周期、uni-app页面生命周期

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