应用生命周期、页面生命周期、组件生命周期

一应用生命周期

函数名	说明	应用场景
onLaunch	当 uni-app 应用初始化完成时触发，全局只触发一次	一般用于查看用户是否授权、获取用户的设备信息等
onShow	当应用启动，或从后台进入前台显示时触发，可以触发多次	一般用于重新进入应用的消息提示或者数据刷新
onHide	监听应用从前台进入后台	一般用于退出应用时的消息提示
onError	应用报错时被触发	用于监测并处理错误

前台、后台定义：

当我们离开应用时，应用不会被直接销毁，而是进入了后台。当我们再次进入到应用时，应用就会从后台进入前台。

那应用什么时候会被真正销毁呢？

当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。

二页面生命周期

函数名	说明	支持平台
onLoad	页面加载时触发，一个页面只会调用一次。可以传递参数	所有
onShow	页面显示时触发，每次打开页面都会调用一次	所有
onReady	页面初次渲染完成后触发，一个页面只会调用一次	所有
onHide	页面隐藏时触发，每次隐藏页面都会被触发	所有
onUnload	页面卸载时触发	所有
onResize	页面每次窗口尺寸变化时会被触发	App、微信小程序
onPullDownRefresh	用户下拉页面时触发，一般用于页面下拉刷新	所有
onReachBottom	页面上拉滚动触底时触发	所有
onTabItemTap	点击底部 tab 栏时触发，参数为 Object	微信小程序、百度小程序、H5、App
onShareAppMessage	点击右上角分享时触发	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	页面滚动时触发，只监听页面垂直滚动	所有
onNavigationBarButtonTap	监听原生标题栏按钮点击事件	App、H5
onBackPress	页面返回时触发	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件	App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5

说明

1 onLoad 参数说明

页面生命周期函数 onLoad，是页面最先执行的生命周期函数，如果从上个页面跳转到本页面，可以通过参数option 传递上个页面的数据。

//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.reLaunch({url: 'test?name=我是首页的数据'
});//me.vue
export default {//options参数就是上个页面传递过来的数据onLoad: function (options) {console.log(options.name);}
}//打印出来的结果
我是首页的数据

2 onPullDownRefresh 函数用于监听该页面用户下拉页面的动作。

普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。
调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。

//pages.json
{"path": "pages/index/index.vue","style": {"enablePullDownRefresh": true}
}//页面，隐藏下拉状态
export default{onPullDownRefresh(){console.log('用户下拉页面时触发')uni.stopPullDownRefresh()}
}

3 onTabItemTap 参数说明

属性	类型	说明
index	String	被点击 tabItem 的序号，从 0 开始
pagePath	String	被点击 tabItem 的页面路径
text	String	被点击 tabItem 的按钮文字

export default {onTabItemTap(options) {console.log('被点击tabItem的序号index:' + options.index)console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)console.log('被点击tabItem的按钮文字text:' + options.text)}
}

注意以下几点：

onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。
如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。在 App 端，从 HBuilderX 1.9 的自定义组件编译模式才开始支持 onTabItemTap。

4 onNavigationBarButtonTap 参数说明

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

export default {onNavigationBarButtonTap(options) {console.log('index:' + options.index)}
}

5 onBackPress 参数说明

返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。

export default {onBackPress(options) {console.log('from:' + options.from)}
}

三组件生命周期

函数名	应用
beforeCreate	实例初始化之后调用
created	实例创建完成后调用
beforeMount	模板编译之前调用
mounted	模板编译完成调用
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

四页面生命周期和组件生命周期的执行顺序

页面生命周期函数 onLoad：页面加载
页面生命周期函数 onShow：页面显示
beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成
页面生命周期函数 onReady：页面初次显示

页面生命周期函数 onLoad、onShow 会先运行，接着 Login 组件中的 beforeCreate、created
等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

页面生命周期函数 onLoad、onShow 会先运行，接着组件中的 beforeCreate、created 等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

像这样比较重复的生命周期函数，我们推荐使用页面生命周期函数，比如：
组件生命周期函数 created 可以替换为页面生命周期中的 onLoad；
组件生命周期函数 mouted 可以替换为页面生命周期中的 onReady。

应用生命周期、页面生命周期、组件生命周期相关推荐

vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期-03
目录本博客环境 Vue-Cli 项目环境搭建与 python 基础环境对比环境搭建创建启动 vue 项目命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pyc ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
React 重温之组件生命周期
生命周期任何事物都不会凭空产生,也不会无故消亡.一个事物从产生到消亡经理的各个阶段,我们称之为生命周期. 具体到我们的前端组件上来,一个组件的生命周期可以大体分为创建.更新.销毁这个三个阶段. 本 ...
微信小程序：uni-app页面Page和组件Component生命周期执行的先后顺序
目录 H5 微信小程序测试代码文档页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 组件生命周期 https:// ...
优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突
优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突场景当前有个页面,此页面有个 tabs,点击对应的 tabs 下面显示不同的模块,且每个模块都有上拉刷新的功能 <!-- pag ...
uni-app中的应用生命周期，页面生命周期，组件生命周期
一.应用生命周期(写在app.vue中) onLaunch:当整个项目启动,渲染完成时触发(全局只触发一次) onShow:小程序显示出来(从后台进入前台显示,可以触发多次) onHide:小程序隐藏 ...
微信小程序组件生命周期和页面生命周期
1.组件的生命周期指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发.其中,最重要的生命周期是 created.attached. detached ,包含一个组件 ...
组件生命周期管理和通信方案
随着移动互联网的快速发展,项目的迭代速度越来越快,需求改变越来越频繁,传统开发方式的工程所面临的一些,如代码耦合严重.维护效率低.开发不够敏捷等问题就凸现了出来.于是越来越多的公司开始推行" ...
React的组件生命周期
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmoun ...

应用生命周期、页面生命周期、组件生命周期

一应用生命周期

二页面生命周期

三组件生命周期

四页面生命周期和组件生命周期的执行顺序

应用生命周期、页面生命周期、组件生命周期相关推荐

最新文章

热门文章

应用生命周期、页面生命周期、组件生命周期

一 应用生命周期

二 页面生命周期

三 组件生命周期

四 页面生命周期和组件生命周期的执行顺序

应用生命周期、页面生命周期、组件生命周期相关推荐

最新文章

热门文章

一应用生命周期

二页面生命周期

三组件生命周期

四页面生命周期和组件生命周期的执行顺序