Vue: The role of life cycle functions

Vue: The role of life cycle functions

Preface

A Vue instance has a complete life cycle, that is to say, from the beginning of a series of processes such as creating, initializing data, compiling templates, hanging in the DOM, rendering-update-rendering, uninstalling, etc., we become the life cycle of the Vue instance, and the hook is in a certain Each stage gives you a chance to do certain processing.

The role of each function

1. beforeCreated():
   • Indicates that the function is called before the instance is fully initialized;
2. created():
   • At this point, Vue's data and methods (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, it starts to compile the html template, render the template string into dom, and finally generate a final compiled template in the memory;
   • The final template only exists in memory and is not rendered on the page;
3. beforeMount():
   • At this point, the template has been compiled, but it has not yet been rendered to the page;
4. 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 mounted, it means that the instance has been created. If there is no other operation, there will be no activity in the memory;
5. beforeUpdate():
   • At this time, the page has been completely mounted, this function is executed when the page data changes;
   • When the data is changed, the data on the page is not updated, but the data in data has been updated;
6. updated():
   • The page completes data update;
7. beforeDestory():
   • When this function is executed, the Vue instance enters the stage of destruction;
   • At this time, the filters, data, and methods can still be used;
8. destoryed():
   • All components have been destroyed, and all data and methods are unusable

Detailed flow chart

References: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8% E6%9C%9F%E9%92%A9%E5%AD%90 .