Detailed explanation of the difference between Vue life cycle

Life cycle classification

Each component of vue is independent, and each component has its own life cycle.

From component creation , data initialization , mounting , updating , and destruction , this is the so-called life cycle of a component.
The specific methods in the component are:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

beforeCreate

It is called after instance initialization and before data observation and event configuration. At this time, the component's options object has not been created, el and data have not been initialized, so methods cannot be accessed.
Methods and data on data, computed, etc.

created

It is called after the instance has been created. At this step, the instance has completed the following configurations: data observation, property and method calculations, watch/event event callbacks, and completed data initialization, but el has not. However, the hanging stage has not started yet, and the $el property is not visible yet. This is a common life cycle because you can call methods in methods, change the data in data, and the changes can be reflected on the page through Vue's responsive binding, get the calculated properties in computed, etc. Usually we can pre-process the instance here

beforeMount (before mounting)

It is called before the hang starts, and the related render function is called for the first time (virtual DOM). The instance has completed the following configurations: compiling the template, generating html from the data in the data and the template, and completing the el and data initialization. Note that it has not yet been hung on the html to the page.

mounted

Mounting is completed, that is, the HTML in the template is rendered to the HTML page. At this time, you can generally do some ajax operations, and mounted will only be executed once.

beforeUpdate

Called before data is updated, before the virtual DOM is re-rendered and patched. Further changes to the state can be made in this hook without triggering an additional re-rendering process.

updated

This hook is only called when the virtual DOM is re-rendered and patched due to data changes. When called, the component DOM has been updated, so operations that depend on the DOM can be performed. However, in most cases, changing the state during this period should be avoided, as this may cause an infinite loop of updates. This hook is not called during server-side rendering.

beforeDestroy

Called before the instance is destroyed, the instance is still fully usable.
In this step, you can also use this to get the instance.
Generally, some reset operations are performed in this step, such as clearing the timer in the component and monitoring the DOM event

destroyed

Called after the instance is destroyed. After the call, all event listeners will be removed and all child instances will be destroyed. This hook is not called during server-side rendering.
The vue instance has released the event listener and DOM binding, but the DOM structure still exists

Execution order (diagram)

This is the end of this article about the detailed explanation of the differences in the Vue life cycle. For more relevant Vue life cycle content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!