The VUE lifecycle, which is simply a component’s entire process from creation to destruction, is the lifecycle
Vue life cycle
The entire process of a component from creation to destruction is the life cycle
Human life cycle:
1.1_ Hook functions
Target: Functions built into the Vue framework that are automatically executed with the component lifecycle phase
Function: Perform a specific operation at a specific point in time
Scenario: After the component is created, an Ajax request can be made in the Created lifecycle function to initialize the data data
Classification: 4 major stages and 8 methods
- Initialize the
- mount
- update
- The destruction
| phase | The method name | The method name |
|---|---|---|
| Initialize the | beforeCreate | created |
| mount | beforeMount | mounted |
| update | beforeUpdate | updated |
| The destruction | beforeDestroy | destroyed |
Official document
The following figure shows the life cycle of the instance. You don’t have to understand everything immediately, but it will become more valuable as you learn and use it.
1.2_ Initialization Phase
Objective: To master the functions and execution timing of two hook functions during initialization
Explanation of meaning:
1. New Vue() — Vue instantiation (the component is also a small Vue instance)
2.Init Events & Lifecycle – Initializes Events and Lifecycle functions
3. BeforeCreate — The lifecycle hook function is executed
4.Init Injections&reActivity — Add data and methods inside Vue
5. Created – Lifecycle hook functions are executed and instances are created
6. Next comes the compile template phase — start the analysis
7.Has el option? – Is there an EL option – Check where to hang it
No. Call the $mount() method
Yes, continue checking the template option
1.3_ Mount Phase
Objective: To master the functions and execution timing of two hook functions in the mount stage
Explanation of meaning:
1. Check the template option
Compiling template returns the render function
None – Compile el option tag as template(template to render)
2. Before mounting the virtual DOM to the real DOM
BeforeMount – Life cycle hook functions are executed
4. Create… Attach the virtual DOM and rendered data to the real DOM
5. The real DOM is mounted
Mounted – The lifecycle hook function is executed
1.4_ Update phase
Objective: To master the functions and execution timing of two hook functions in the update phase
Explanation of meaning:
1. Update DOM before data changes in data
BeforeUpdate – The lifecycle hook function is executed
3. The Virtual DOM… – The virtual DOM is re-rendered and patched to the real DOM
4. Updated — The lifecycle hook function is executed
5. When data changes – repeat the cycle
1.5_ Destruction stage
Objective: To master the functions and execution timing of the two hook functions in the destruction phase
Explanation of meaning:
1. When $destroy() is called — such as when the component DOM is removed (example v-if)
BeforeDestroy – The lifecycle hook function is executed
3. Remove the data monitor, subcomponents, and event listeners
4. After the instance is destroyed, a hook function is finally triggered
5. Destroyed — Lifecycle hook functions are executed
