Introduction to life cycle
The life cycle of Vue. refers to a series of methods provided by Vue during the process of creating, mounting, updating, and destroying component instances. These methods allow us to perform specific operations at different stages to meet the customization needs of the component.
Without life cycle functions, many of our functions cannot be implemented.
一、beforeCreate
After the instance is initialized, data observation and event/watcher setup are called before. At this stage, the component's properties and methods have not been initialized, and props, data, and methods cannot be accessed.
Two, created
Called immediately after instance creation. At this stage, you can access properties such as props, data, methods, etc., and operate on the data.
3. beforeMount
Called before mounting begins. At this stage, the template has been compiled but has not yet been rendered to the page. You can perform some data calculations or perform some asynchronous operations at this stage
4. mounted
Called after the instance is mounted to the page. At this point, the component has been rendered to the page and the DOM elements can be accessed. It is often used to perform some operations that require DOM elements, such as getting the width and height of elements, adding event listeners, sending requests, etc.
5. beforeUpdate
Called before data is updated. At this stage, the previous data status can be obtained and some more complex operations can be performed, such as triggering an asynchronous request before updating.
六、updated
Called after the data has been updated. When this hook function is triggered, the DOM has been re-rendered, and it is guaranteed that all components have been updated. DOM operations can be performed at this stage, but care needs to be taken to avoid infinite loops of updating data.
7. beforeUnmount
Called before the instance is destroyed. You can clear timers, unbind event listeners, etc. at this stage.
8. unmounted
Called after the instance is destroyed. At this stage, the component-related data, timers and event listeners have been cleared and the component is no longer available.