What is life cycle?
The front-end life cycle generally refers to the process that a page or website goes through from the creation to the application closure. Just like a person's life, from birth, to work, to death.
What is the use of life cycle?
The significance of the life cycle is that the status of objects such as pages in each process of the life cycle can be controlled in real time.
For example, a page will call the beforeCreat method before it is created. In this method, we can make preparations before the page is loaded.
VUE life cycle
beforeCreat (): As the name suggests, it is a method called before the page is created. After a new vue instance, there are only some default life cycle hooks and default events, and nothing else has been created yet. When this life cycle is executed, the data in data and methods have not yet been initialized. The data in data and the method in methods cannot be used at this stage.
created (): After the object is created, the created method will be called. At this time, the page has been created and the data has been initialized.
beforeMount (): Before mounting, it has been in the memory. The template has been compiled, but it has not been mounted on the page. At this time, the page is still old.
mounted (): After mounting, the Vue instance has been initialized. At this point, the component leaves the creation phase and enters the running phase. If we want to operate the DOM nodes on the page through a plug-in, we can do it at this stage at the earliest.
beforeupdate (): Before the page is updated, the data displayed on the page is still old, the data in data is updated, and the page has not been synchronized with the latest data. updated (): After the page is updated, the data displayed on the page
and data The data in has been synchronized and is all up to date.
beforeDestroy (): Before the page is destroyed, the Vue instance enters the destruction phase from the running phase. At this time, all data, methods, instructions, filters... are available. It has not been truly destroyed
( ): After the page is destroyed, all data, methods, instructions, filters... are in an unavailable state at this time. The component has been destroyed
So in simple terms it is: before and after creation => before and after mounting => before and after update => before and after destruction
uniapp life cycle
uniapp is a framework based on vue. The life cycle of uniapp is divided into three types:
APP life cycle, page life cycle, and component life cycle.
The component life cycle is the same as the vue life cycle.
For the time being, you only need to know about the life cycles of entering, closing, and hiding. I have already talked about separating the important from the unimportant. There is no requirement to write down the unimportant life cycles. You only need to know that there is such a thing. Use Just check it when you arrive.
APP life cycle:
onLaunch : Triggered when uni-app initialization is completed (only triggered once globally)
onShow : When uni-app starts, or enters the foreground display from the background (triggered when the page is displayed)
onHide : When uni-app enters the background from the foreground (hide/ Triggered when exiting the page)
onError : Triggered when uni-app reports an error
onUniNViewMessage : Monitor the data sent by the nvue page
onUnhandledRejection : Monitor the unhandled Promise rejection event listening function
onPageNotFound : The page does not exist monitoring function
onThemeChange : Monitor system theme changes
Page life cycle:
onInit monitors the page initialization. Its parameters are the same as onLoad parameters. The triggering time is earlier than onLoad. OnLoad
monitors page loading. Its parameters are the data passed by the previous page. The parameter type is Object (used for page parameters).
onShow monitors page display. It is triggered every time the page appears on the screen, including returning to the current page from the subordinate page point
onReady to listen for the initial rendering of the page to be completed.
Note that if the rendering speed is fast, onHide will be triggered before the page entry animation is completed.
OnUnload will monitor page unloading and
onResize will monitor window size changes.
onPullDownRefresh monitors the user's pull-down action. It is generally used for pull-down refresh
onReachBottom . The event of the page scrolling to the bottom (not scroll-view scrolling to the bottom) is often used to pull down the next page data.
onTabItemTap is triggered when the tab is clicked. The parameter is Object
onShareAppMessage . The user clicks the upper right corner to share
onPageScroll. Monitor page scrolling, the parameter is Object
onNavigationBarButtonTap monitors the native title bar button click event, the parameter is Object
onBackPress monitors the page return
onNavigationBarSearchInputChanged monitors the native title bar search input box input content change event
onNavigationBarSearchInputConfirmed monitors the native title bar search input box search event, the user clicks the soft keyboard Triggered when the "Search" button is on
onNavigationBarSearchInputClicked listens to the native title bar search input box click event (triggered only when the searchInput configuration in pages.json is disabled is true)
onShareTimeline listens for the user to click the upper right corner and forwards it to the circle of friends
onAddToFavorites listens for the user to click the upper right corner collect
How to use life cycle
Here is an example of the life cycle of uniapp’s APP:
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>