What is life cycle and life cycle function
The life cycle refers to the entire stage of a component from creation -> operation -> destruction, emphasizing the time period.
The life cycle function is a built-in function provided by the Vue framework, which will be automatically executed in order along with the life cycle of the component.
Note: The life cycle emphasizes the time period, and the life cycle function emphasizes the point in time.
Lifecycle functions during creation
1、beforeCreate：
The function is called before the instance is fully initialized. At this time, the data and methods attributes have not yet been 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 is completed, compile the html template, render the template string into DOM, and finally generate a compiled final template in memory;
The final template only exists in memory and is not rendered to the page;
3、beforeMount：
At this point, the compilation of the template has been completed, but it has not been mounted on the page;
4、mounted：
At this point, the compiled template has been mounted to the container specified on the page for display;
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, and if there is no other operation, there will be no memory activity;
Lifecycle functions at runtime
5、beforeUpdate：
At this point, the page has been fully mounted, and this function indicates that it will be executed when the page data changes;
When the data changes, the data on the page is not updated, but the data in data has been updated;
6、updated：
At this point, the status value in data and the data displayed on the interface have been updated, and the interface has been re-rendered;
Lifecycle functions during destruction
7、beforeDestroy：
Called before the instance is destroyed, at this step, the instance is still fully available.
8、destroyed：
Everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.
All components have been destroyed, and all data and methods are unavailable.
Among the life cycle hook functions, the most commonly used ones should be created and mounted.
created: Called before the template is rendered into html, that is, some attribute values are usually initialized, and then rendered into a view. Main applications: calling data, calling methods, calling asynchronous functions.
mounted: Called after the template is rendered into html, usually after the initialization page is completed, and then some required operations are performed on the dom node of html. Since the html has been rendered at this time, the dom node can be directly manipulated.