A Vue instance has a complete life cycle, that is to say, a series of processes from the beginning of creation, initialization of data, compilation of templates, hanging in DOM, rendering-update-rendering, unloading, etc., we become the life cycle of Vue instance, the hook is in a certain This stage gives you an opportunity to do some processing.
1. Deriving the life cycle
| 1. Name: life cycle callback function, life cycle function, life cycle hook. |
| 2. What is it: some functions with special names that Vue calls for us at critical moments. |
| 3. The name of the lifecycle function cannot be changed, but the specific content of the function is written by the programmer according to the requirements. |
| 4. The this point in the life cycle function is the vm or component instance object. |
2. Analysis life cycle
(1) beforeCreate (before creation)
After the instance is initialized and before the data observation and event configuration are called, the option object of the component has not yet been created, and el and data have not been initialized, so methods and data on methods, data, computed, etc. cannot be accessed.
(2) created (after creation)
It is called after the instance has been created. In this step, the instance has completed the following configurations: data observation, operation of attributes and methods, watch/event event callback, and initialization of data data, but el has not. However, the hanging stage has not yet started, and the $el attribute is currently invisible. This is a common life cycle, because you can call the methods in methods, change the data in data, and the modification can be reflected through Vue's responsive binding On the page, get the calculated properties in computed, etc. Usually we can preprocess the instance here, and some children's shoes like to send ajax requests here. It is worth noting that there is no way to process the instance in this cycle The conversion process is intercepted, so if some data must be obtained before being allowed to enter the page, it is not suitable to send a request in this method. It is recommended to complete it in the component routing hook beforeRouteEnter
（3）beforeMount
The hang is called before the start, and the related render function is called for the first time (virtual DOM). The instance has completed the following configuration: Compile the template, generate html from the data in the data and the template, and complete the initialization of el and data. Note that it is still Nothing hangs in the html to the page.
（4）mounted
Hanging is completed, that is, the HTML in the template is rendered to the HTML page. At this time, you can generally do some ajax operations, and mounted will only be executed once.
（5）beforeUpdate
Called before the data is updated, before the virtual DOM is re-rendered and patched, the state can be further changed in this hook, and no additional re-rendering process will be triggered
(6) updated (updated)
Virtual DOM re-rendering and patching will only be called due to data changes. When called, the component DOM has been updated, so operations that depend on the DOM can be performed, and in most cases, you should avoid changing the state during this period, because This can cause an infinite loop of updates, the hook is not called during server side rendering
(7) beforeDestroy (before destruction)
Called before the instance is destroyed, the instance is still fully available,
- In this step, you can also use this to get the instance,
- Generally, some reset operations are done in this step, such as clearing the timer in the component and the dom event listened to
(8) destroyed (after destruction)
Called after the instance is destroyed. After calling, all event listeners will be removed and all sub-instances will be destroyed. This hook is not called during server-side rendering
3. Summarize the life cycle
| Commonly used lifecycle hooks: | |
| 1.mounted: Send ajax request, start timer, bind custom event, subscribe message, etc. [initialization operation]. | |
| 2.beforeDestroy: Clear timers, unbind custom events, unsubscribe messages, etc. [finishing work]. | |
| About destroying Vue instances | |
| 1. After destruction, no information can be seen with the help of Vue developer tools. | |
| 2. Custom events will be invalid after destruction, but native DOM events are still valid. | |
| 3. Generally, the data will not be manipulated in beforeDestroy, because even if the data is manipulated, the update process will not be triggered again. |
High-quality explanation: Detailed explanation of Vue life cycle - Xiao Wu 3 - 博客园
