In-depth interpretation of life cycle functions

---

foreword

I have been in contact with Vue for a long time without knowing it, and I have a deeper understanding of life cycle functions. I also have a certain understanding of when to use it, where to use it, and how to use it. Here I will share with you my life cycle cycle understanding.

What is a life cycle?

To put it simply, all components in Vue have a life cycle. From the creation of components to the destruction of components, there will be many stages. The tasks of each stage are different, and the timing of triggering is also different. This is It requires us to have a deep understanding of the life cycle in order to use it better, and the use of life cycle functions can get twice the result with half the effort in development.
Next, I will analyze from the perspective of official website documents, including the process of life cycle, what is done inside Vue in each stage, detailed explanation of life cycle functions and suitable operations for each stage.

---

Here we first look at the description of the life cycle in the official document:

Each Vue component instance needs to go through a series of initialization steps when it is created, such as setting up data listeners, compiling templates, mounting instances to DOM, and updating DOM when data changes. Along the way, it also runs functions known as lifecycle hooks, giving developers the opportunity to run their own code at certain stages.

life cycle process

Create components

Create components new Vue. In the initialization of newVue, Vue will initialize various components.

This part of the content will not be explained first, and I will write a special article to explain it in detail later.

Initialization events and lifecycle

Init Events & LifecycleAt this stage, events and life cycles will be initialized, and components such as props, data, and methods have not been created yet, so they are all in an unavailable state

Here you can clearly see beforeCreatethe output this.IDas undefined.

Initialization module

Initialization moduleInit injections & reactivity

In this phase, all components will be initialized

At this stage the component will be created and ready to use, but the template structure of the component is still not generated.

Here it can be clearly seen that the data in data can be obtained, but the DOM structure has not been created so it cannot be obtained.

Judging the data and template of the rendering structure

At this stage, it will be judged whether it exists , if not , the mount ( el ) methodel will be called ( mount ( el ) method ($mount\left(el\right)method\; ($ the mount method is used to mount our extension), if it exists, it will continue to check the template and the
DOM information can be obtained at this time

Generate HTML structure

In this stage, the generated data and templates will be compiled in the previous step, and the HTML structure will be compiled and generated in memory. Note that the current DOM structure has not yet been generated.

render HTML structure

Replace the DOM element specified by the el attribute with the HTML structure compiled and generated in memory. After this stage, the DOM structure of the current component is already included

Data Update

In this stage, it will be executed repeatedly according to the data changes in the page, and the DOM structure of the component will be re-rendered according to the latest data.

Initial destruction of components

When the component is about to be destroyed, when the component is about to be destroyed, the component is still in a normal working state at this stage and has not been completely destroyed. In this stage, the data listener, subcomponents, and event listeners will be destroyed first

destroy component

Reaching this stage means that the component has been destroyed, and the corresponding DOM hook of this component in the browser has been completely removed

---

life cycle function

Function name	stage
beforeCreate	before creation
created	after creation
beforeMount	before mount
mounted	after mount
beforeUpdate	before update
updated	Updated
beforeDestroy	before destruction
destroyed	after destruction

beforeCreate

Before creation: at this stage, the props, data, and methods of the component have not yet been created, and they are all in an unavailable state. This
stage is mainly suitable for operations on components that do not need to depend on it
. If there is a situation like login, you can use this function.

created

After creation: The props, data, and methods of the component have been created and are available, but the template structure of the component has not yet been generated.
Relying on this feature, it is best for us to initiate an Ajax request in this function, because there is already data here, and this is the fastest place to initiate an Ajax request, and Ajax needs to initiate a request as soon as possible for a faster response. So here is the best place to make an Ajax request.

beforeMount

Before mounting: the HTML structure compiled in memory will be rendered to the browser. At this time, there is no DOM structure of the current component in the browser.
There are relatively few practical applications at this stage. The beforeMount stage is transitional and is generally rarely used.

mounted

After mounting: At this stage, the HTML structure in memory has been successfully rendered to the browser. At this point, the browser already contains the DOM structure of the current component.
In this stage, it is most suitable to use the method of manipulating the DOM structure, such as displaying exceptions based on data, rendering data, etc. This stage is the most commonly used stage, and most of the operations for data rendering can be completed here.

beforeUpdate

Before update: It is necessary to re-render the template structure of the component according to the latest data after the change.
This stage is suitable for operations before data update, such as monitoring data and operating data changes. Note that DOM cannot be relied on at this stage The component is operated. Although the value of the DOM has changed at this time, the obtained DOM is still in an updated state.

updated

After update: The re-rendering of the DOM structure of the component has been completed based on the latest data.
In this stage, the latest state of the DOM can already be obtained. The suitable operations are performed after the data is updated, such as adding data listening before the update. The device can be removed here, and a series of logical operations need to be performed on the latest DOM after the data update is completed, all of which can be used here.

beforeDestroy

Before Destruction: This component will be destroyed. It has not been destroyed at this time, and the component is still in a normal working state.
This stage is suitable for a series of operations before destruction. For example, if I want to delete a row of data, a certain time can be added here. When it is confirmed to be destroyed, or other DOM data needs to be manipulated before being destroyed.

destroyed

After destruction: The component has been destroyed, and the corresponding DOM structure of this component in the browser has been completely removed.
After calling, all event listeners will be removed and all child instances will be destroyed. This hook is not called during server-side rendering.