Shulou(Shulou.com)06/03 Report--

Editor to share with you what the life cycle in vuejs refers to, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The life cycle of vuejs refers to the process from creation to destruction of vue instance objects. All the functions of vue are implemented around its life cycle. Calling the corresponding hook functions at different stages of the life cycle can achieve 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 pictured above.

What is the life cycle?

Vue life cycle refers to the process from creation to destruction of vue instance objects. All the functions of vue are implemented around its life cycle. Calling the corresponding hook functions at different stages of the life cycle can achieve two important functions: component data management and DOM rendering.

Vue instances have a complete life cycle, that is, from the beginning to create, initialize data, compile templates, mount Dom, render → update → rendering, uninstall and other processes, we call this the life cycle of Vue. In popular terms, the process from creation to destruction of Vue instances is the life cycle.

Throughout the life cycle of Vue, it provides a series of events that allow us to register js methods when events are triggered, and to control the overall situation with our own registered js methods. The this in these event response methods points directly to the instance of vue.

And then above, the annotation of the life cycle diagram.

What is particularly noteworthy is the difference between created hook function and mounted hook function.

When does each hook function trigger?

BeforeCreate

After the instance is initialized, data observation (data observer) and event/watcher events are called before configuration.

Created

The instance is called after it has been created. In this step, the instance has completed the following configuration: data observation (data observer), operation of properties and methods, and watch/event event callback. However, the mount phase has not yet begun, and the $el property is not currently visible.

BeforeMount

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

Mounted

The hook is called after the el is replaced by the newly created vm.$el and mounted to the instance.

BeforeUpdate

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

Updated

The hook is called after the virtual DOM is re-rendered and patched due to data changes.

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

The 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 terminated. After the call, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed. The hook is not called during server-side rendering.

The above is all the content of the article "what does the life cycle in vuejs refer to?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.