What is the role of vue.js life cycle function

The role of the vue.js life cycle function: 1. [beforeCreated()] means that the function is called before the instance is fully initialized; 2. [beforeMount()] At this time, the template has been compiled, but it is still Not rendered to the page; 3. [updated()] page completes data update.

【Recommended related articles: vue.js】

vue.js life cycle The role of the function:

Preface

The Vue instance has a complete life cycle, that is, from creation, initialization of data, compilation of templates, hanging in DOM, rendering-update- A series of processes such as rendering and unloading become the life cycle of the Vue instance. Hooks give you an opportunity to do certain processing at a certain stage.

The role of each function

beforeCreated():

• indicates that the instance is fully initialized This function was called before;

created():

• Vue’s data and methods at this time (data, methods ) have been initialized;

• If you want to operate data and methods, you need to operate in this function at the earliest;

• After created is completed Start compiling the html template, render the template string into dom, and finally generate a compiled final template in the memory;

• The final template only exists in the memory and has not been rendered. to the page;

beforeMount():

• At this time the template has been compiled but has not yet been rendered. Go to the page;

mounted():

• At this point the page has been rendered and the dom node already exists in the document ;

• If you want to operate the dom node, you need to do it in this function at the earliest;

• After executing mounted, it means that the instance has been created. If there are no other operations, there will be no more activity in the memory;

beforeUpdate():

• At this time the page has been Fully mounted, this function means that it will be executed when the page data changes;

• When the data changes, the page data is not updated, but the data in data has been updated;

updated():

• The page has completed data update;

beforeDestory():

• When this function is executed, the Vue instance enters the destruction stage;

• At this time, the filter, data and methods can still be used;

##destoryed():

• The components have been completely destroyed and all data , methods cannot be used

Detailed flow chart

## Related free learning recommendations:

JavaScript (Video)

The above is the detailed content of What is the role of vue.js life cycle function. For more information, please follow other related articles on the PHP Chinese website!