An in-depth analysis of the life cycle of uni-app

This article brings you relevant knowledge about the uniapp declaration cycle. It mainly introduces issues related to the application declaration cycle, page life cycle and component life cycle. I hope it will be helpful to everyone.

## Recommended: "

uniapp tutorial"

Application life cycle

uni-app Support the following application life cycle functions:

##Function name onLaunchuni-apponShow uni-apponHideuni-apponErroruni-apponUniNViewMessagenvueonUnhandledRejectiononPageNotFoundonThemeChange

Note

• The application life cycle can only be monitored in App.vue, and monitoring on other pages is invalid.
• Jump to the page in onlaunch. If you encounter a white screen error, please refer to the navigation to jump page in the onlaunch life cycle. Note - DCloud Q&A
• onPageNotFound The page has actually been opened (for example, by sharing card, mini program code) and it is found that the page does not exist, it will be triggered. The api jump to the page that does not exist will not be triggered (such as uni.navigateTo)

Page life cycle

uni-app Supports the following page life cycle functions:

Description
Triggered when	initialization is completed (only triggered once globally)
When	starts, or enters the foreground from the background to display
When	enters the background from the foreground
Triggered when	reports an error
Yes	To monitor the data sent by the page, please refer to nvue communicating with vue
The unhandled Promise rejection event listening function (2.8. 1)
The page does not have a listening function
Listening to system theme changes

##onReady The initial rendering of the monitoring page is completed. Note that if the rendering speed is fast, onHideonUnload##onResizeListen to window size changesApp, WeChat appletonPullDownRefresh Monitor user pull-down actions, generally used for pull-down refresh, refer to the exampleonReachBottomEvent when the page scrolls to the bottom (not scroll-view to the bottom), often used to pull down the next page of data. See the notes below for detailsTriggered when tab is clicked, the parameter is Object , please see the notes below for detailsUsers click on the upper right corner to shareListen to page scrolling, the parameter is ObjectListen to the native title bar button click event, the parameters are ObjectListen for page return, return event = {from:backbutton, navigateBack}, backbutton indicates that the source is the return button in the upper left corner or the android return key; navigateBack indicates that the source is uni. navigateBack; Detailed description and usage: onBackPress detailed explanation. The Alipay applet can only be triggered by a real machine, can only monitor returns that are not caused by navigateBack, and cannot prevent the default behavior. Monitor the input content of the native title bar search input box Change eventApp,H51.6.0onNavigationBarSearchInputConfirmedListen to the native title bar search input box search event, user Fired when the "Search" button on the soft keyboard is clicked. App, H51.6.0onNavigationBarSearchInputClickedListen to the native title bar search input box click event (pages.json It will be triggered only when the searchInput configuration in disabled is true) App, H51.6.0onShareTimelineListening The user clicks the upper right corner to forward to the circle of friendsWeChat applet2.8.1 onAddToFavoritesMonitors the user’s click on the upper right corner CollectionWeChat Mini Program2.8.1

onInitUsage Note

• Only Baidu Mini Program Basic Library 3.260 or above supports the onInit life cycle
• Other versions or platforms can use the onLoad life cycle at the same time Compatible, be careful to avoid repeatedly executing the same logic
• Logic that does not rely on page parameters can be directly replaced by the created life cycle

onReachBottomUse note can be found in pages. Define the trigger distance onReachBottomDistance at the bottom of a specific page in json. For example, if it is set to 50, then when the page is scrolled to 50px from the bottom, the onReachBottom event will be triggered.

If scroll-view is used and the page does not scroll, the bottom event will not be triggered. For events where scroll-view scrolls to the bottom, please refer to scroll-view's documentation

onPageScroll (Scroll monitoring, scroll monitoring, scrolling events) Parameter description:

Function name	Description	Platform difference description	Minimum version
onInit	Listen to the page initialization, its parameters are the same as the onLoad parameters, which are the data passed on the previous page. The parameter type is Object (used for page parameter transfer), and the triggering time is earlier than onLoad	Baidu Mini Program	3.1.0
onLoad	Monitor page loading, the parameter is the data passed on the previous page, the parameter type is Object (used for page parameters), refer to the example
onShow	Listen to the page display. Triggered every time the page appears on the screen, including returning from the lower-level page point to reveal the current page
## will be triggered before the page entry animation is completed. #Listen page hide
Listen page unload
			##onTabItemTap
WeChat Mini Program, QQ Mini Program, Alipay Mini Program, Baidu Mini Program, H5, App			onShareAppMessage
WeChat applet, QQ applet, Alipay applet, Byte applet, Feishu applet, Kuaishou applet			onPageScroll
nvue does not support it yet			onNavigationBarButtonTap
App, H5			onBackPress
app, H5, Alipay applet			##onNavigationBarSearchInputChanged

##scrollTopNumberThe distance the page has been scrolled in the vertical direction (unit px)

Attribute	Type	Description

Note

• onPageScroll Do not write js with complex interactions in , such as frequent page modifications. Because this life cycle is triggered in the rendering layer, on the non-h5 side, js is executed in the logic layer, and there is a loss in communication between the two layers. If the data exchange between the two layers is frequently triggered during the scrolling process, it may cause lag.
If you want to achieve a transparent gradient of the title bar during scrolling, under App and H5, you can configure the type under titleNView in pages.json to be transparent, for reference.
• If you need to scroll the ceiling to fix certain elements, it is recommended to use CSS sticky layout and refer to the plug-in market. There are also other js-implemented ceiling plug-ins in the plug-in market, but their performance is not good. You can search for them by yourself when needed.
• In App, WeChat applet, and H5, you can also use wxs to monitor scrolling, for reference; in app-nvue, you can use bindingx to monitor scrolling, for reference.
• onBackPress cannot be used on async, which will result in the failure to prevent the default return of

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
    console.log("滚动距离为：" + e.scrollTop);
},

onTabItemTap returned json Object description:

AttributeTypeDescriptionindexStringThe serial number of the clicked tabItem, starting from 0pagePathString The page path of the clicked tabItemtextStringThe button text of the clicked tabItem

Note

onTabItemTap is often used to click on the current tabitem, scroll or refresh the current page. If you click on different tabitem, page switching will definitely be triggered.
• If you want to click a tabitem on the App side without jumping to the page, you cannot use onTabItemTap. You can use plus.nativeObj.view to place a block to cover the original tabitem and intercept the click event.
• Alipay mini program platform onTabItemTap is triggered after clicking on a non-current tabitem, so it cannot be used to implement the operation of clicking back to the top

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap Parameter description :

AttributeTypeDescriptionindex NumberThe subscript of the native title bar button array

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式为json对象：{"text":"测试","index":0}
}

onBackPress Callback parameter object description:

AttributeTypeDescriptionfromStringThe source of triggering the return behavior: 'backbutton' - the navigation bar button in the upper left corner and the Android return key; 'navigateBack' - the uni.navigateBack() method.

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意

• nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
• 支付宝小程序真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

		Alipay applet does not support returning this field

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

推荐：《uniapp教程》

The above is the detailed content of An in-depth analysis of the life cycle of uni-app. For more information, please follow other related articles on the PHP Chinese website!