life cycle:
The process of each vue instance from being created to being destroyed is the life cycle of this vue instance. In this process, he has experienced from the beginning of creation, initialization of data, compilation of templates, mounting of DOM, rendering->update->rendering, A series of processes such as uninstallation.
Note: The implementation of all functions of Vue is carried out around its life cycle. Calling the corresponding hook function at different stages of the life cycle can realize two important functions of component data management and DOM rendering.
The vue life cycle can be divided into eight stages, namely:
beforeCreate (before creation), created (after creation), beforeMount (before loading), mounted (after loading), beforeUpdate (before update), updated (after update), beforeDestroy (before destruction), destroyed (after destruction)
1. Before creation (beforeCreate)
At this stage, after the Vue instance is initialized, the data observation and event mechanism are not formed at this time, and DOM nodes cannot be obtained.
2. After creation (created)
At this stage, the vue instance has been created, but the DOM element cannot be obtained.
Both beforeCreate and created functions are executed in the _init method during the instantiation of Vue. The beforeCreated and created hooks are called before and after the initState function. The function of initState is to initialize properties such as props, data, methods, watch, and computed. The values defined in props, data, methods, and Defined functions, and created can. When these two functions are executed, the DOM has not been rendered yet.
Note : If the component needs to interact with the backend when loading, it can be executed in these two functions. If you need to access the data in props and data, you need to use the created hook function.
3. Before loading (beforeMounte)
At this stage, the specific DOM is still not available, but the root node mounted by vue has been created, and then the operation of vue on the DOM will continue around the root element; beforeMounted is a transitional stage. Not many scenes are used.
4. After loading (mounted)
The most commonly used hook function in projects, often used to write asynchronous requests. At this stage, the data has been initialized and the DOM has been rendered.
Note : beforeMounte and mounted functions are executed in the Vue instance mounting phase, and their calls are actually in the mountComponent function. When the Vue component is instantiated, it will first wait for the instantiation of the child component to complete, so the order in which the data of the mounted hook function of the saved component is added is first the child and then the parent.
5. Before Update (beforeUpdate)
At this stage, Vue follows the principle of data-driven DOM; although the beforeUpdate function does not update the data immediately after the data is updated, the data in the DOM will change, which is the function of Vue's two-way data binding.
6. After update (updated)
At this stage the DOM will be synchronized with the changed content.
Note : The execution timing of beforeDestroy and updated hook functions is when the data is updated.
7. Before Destroy (beforeDestroy)
In the previous stage, Vue has successfully updated the DOM through data. When we no longer need to manipulate the DOM, we need to destroy Vue, that is, to know the relationship between the Vue instance and the DOM, and the current component can be destroyed by using the user destroy method. Before destroying, the beforeDestroy hook function will be triggered.
8. After destruction (destroyed)
This hook function will be triggered after destruction.
The life cycle idea of vue runs through the development of components. By being familiar with its life cycle and calling different hook functions, you can accurately control the data flow and its impact on DOM; the idea of vue life cycle is the vivid embodiment and inheritance of Vnode and MVVM .
Note : The execution order of the destroy hook function is first child and then parent, which is the same as the mounted process