What is a life cycle?
Also known as: life cycle callback function, life cycle function, life cycle hook
It is a function with some special names that Vue helps us call at critical moments
The life cycle of vue is a function that is automatically executed at a specific point in time from creation to destruction. There are 8 life cycle functions: beforeCreate , Create , beforeMount , Mounted , beforeUpdate , Update , beforeDestory , destroyed
The this point in the life cycle function is the vm or component instance object
The name of the life cycle function cannot be changed (mounted), but the specific content of the function is written by the programmer according to the requirements
The following figure is a flow chart of the life cycle
1. beforeCreate (to be created)
The beforeCreate() function is a function that vue will create but has not yet created. At this time, the data of data and the methods in methods cannot be accessed through vm
Initialization: life cycle, events, but the data proxy has not yet started
2. Create
Create() function, at this time, the data in data can be accessed through vm, and the method in methods
Call this function after the vue instance object has been created, data monitoring, data proxy, etc. have started to work, at this time you can call the method in methods and use the data in data
3. beforeMount (to be mounted)
The beforeMount() function indicates that vue starts to parse the template, executes the instructions in the code, and renders it into the virtual DOM (the virtual DOM exists in memory). It is worth noting that the template has not been rendered to the page at this time, and the page is presented What is not compiled is the DOM structure, and all operations on the DOM will not work in the end
4. Mounted
The Mounted() function is to convert the virtual DOM parsed in memory into real DOM and insert it into the page
The page presents the compiled DOM at this time, and all operations on the DOM can be realized. So far, the initialization process is over.
Generally at this stage: start the timer, send network requests, subscribe to messages, bind custom events and other initialization operations
5. beforeUpdate (to be updated)
The data displayed on the page in the beforeUpdate() function stage is still old and not updated, but the data in data is the latest, and the page has not yet been synchronized with the data
This stage of beforeUpdate-->Update will generate a new DOM based on the new data, compare the new DOM with the old DOM, complete the page update, and complete the update of the model-->view (view layer)
6. Update (updated)
In the Update() phase, the data is new, the data displayed on the page is also the latest, and the page and data are kept in sync
7. beforeDestory (to be destroyed)
The beforeDestory() stage is about to be destroyed, and the data, methods, etc. in the instance object are still available.
Generally, at this stage, timers are closed, messages are unsubscribed, custom events are unbound, etc.
8. destroyed (destroyed)
The destroyed () stage component has been destroyed, and all instructions and data are unavailable at this time
About destroying Vue instances
- After destroying, I can't see any information with the help of Vue developer tools
- Custom events will be invalid after destruction, but native DOM events are still valid
- Generally, the data will not be manipulated in beforeDestroy, because even if the data is manipulated, the update process will not be triggered again
The life cycle is a very important stage of learning Vue, you must understand and understand!