What is the life cycle of vuejs

The life cycle of vuejs refers to the process from the creation to the destruction of the vue instance object. 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 Realizes two important functions: component data management and DOM rendering.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The life cycle is shown in the picture first

##What is the life cycle

The Vue life cycle refers to the process from the creation to the destruction of a vue instance object. The implementation of all functions of vue is carried out around its life cycle, and the corresponding functions are called at different stages of the life cycle. Hook functions can realize two important functions: component data management and DOM rendering.

Vue instances have a complete life cycle, that is, a series of processes from starting to create, initializing data, compiling templates, mounting Dom, rendering→update→rendering, uninstallation, etc. We call this the life of Vue cycle. In layman's terms, the process from creation to destruction of a Vue instance is the life cycle.

In the entire life cycle of Vue, it provides a series of events, which allows us to register js methods when the events are triggered. It allows us to use our own registered js methods to control the overall situation and respond to these events. This in the method directly points to the instance of vue.

The picture above, the annotation of the life cycle diagram

##It is particularly worth noting the difference between the created hook function and the mounted hook function

When does each hook function trigger?

beforeCreate

Called after instance initialization and before data observer and event/watcher event configuration.

created

Called after the instance has been created. At this step, the instance has completed the following configuration: data observer, operations on properties and methods, and watch/event event callbacks. However, the mount phase has not started yet, and the $el attribute is not currently visible.

beforeMount

Called before the mount starts: the relevant render function is called for the first time.

mounted

el is replaced by the newly created vm.$el and is mounted to the instance before calling this hook.

beforeUpdate

Called when the data is updated, which occurs before the virtual DOM is re-rendered and patched. You can further change the state in this hook, which will not trigger an additional re-rendering process.

updated

This hook will be called after virtual DOM re-rendering and patching due to data changes.

When this hook is called, the component DOM has been updated, so you can now perform operations that depend on the DOM. In most cases, however, you should avoid changing state during this period, as this may cause an infinite loop of updates.

This hook is not called during server-side rendering.

beforeDestroy

Called before the instance is destroyed. At this step, the instance is still fully available.

destroyed

Called after the Vue instance is destroyed. When called, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.

Related recommendations: "

vue.js Tutorial

"

The above is the detailed content of What is the life cycle of vuejs. For more information, please follow other related articles on the PHP Chinese website!