Preface
Let’s continue to study today. Today I will sort out the life cycle of VUE, and explain the usage scenarios and functions given in sequence. Hehehehe, let's learn together
life cycle
beforeCreate：Used before creating the component; after instance initialization, call synchronously before data listening and event/listener configuration.
beforeCreate:function(){
//Before component creation (this)
}created: Used after creation;
Using this component, the created method will be called, and the data-driven view of the backend can be operated in the created method;
application:Send ajax request
created:function(){
()
},beforeMount: Called before mounting data to DOM
Called before the mount starts: RelatedrenderThe function is called for the first time.
This hook is not called during server-side rendering.
beforeMount:function(){
(('app'));
},mounted: After mounting data to DOM, the DOM operation after Vue is called.
The instance is called after being mounted, at this timeelNewly createdvm.$elReplaced. If the root instance is mounted on an element in a document,mountedWhen calledvm.$elAlso in the document.
mounted:function(){
(('app'));
}, beforeUpdate: Call this hook before updating the DOM Application: You can get the original DOM
After the data changes, the DOM is called before it is updated. This is suitable for accessing an existing DOM before it will be updated, such as removing a manually added event listener.
This hook is not called during server-side rendering, because only the initial rendering will be done on the server-side.
beforeUpdate:function(){
//Call this hook before updating the DOM Application: You can get the original DOM (('app').innerHTML);
},updated: Call this hook after updating the DOM Application: You can get the latest DOM
Called after the virtual DOM is re-rendered and updated due to data changes.
When this hook is called, the component DOM has been updated, so you can now perform operations that depend on the DOM. However, in most cases, you should avoid changing the state during this period. If the corresponding state changes, it is usually best to use a computed attribute or a watcher instead.
updated:function(){
(('app').innerHTML);
}, beforeDestroy：
- Called before instance is destroyed. At this step, the instance is still fully available.
This hook is not called during server-side rendering.
beforeDestroy:function(){
('beforeDestroy')
},destroyed：
- Called after the instance is destroyed. After this hook is called, all instructions corresponding to the Vue instance are unbinded, all event listeners are removed, and all sub-instances are also destroyed.
This hook is not called during server-side rendering.
destroyed:function(){
('destroyed')
},activated: Functions for component activation
activated:function(){
('Component is activated')
},deactivated: for component deactivated
deactivated:function(){
('Component is disabled')
}This is the end of this article about the compilation and compilation of all Vue life cycle components. For more related contents of Vue life cycle components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!