Detailed explanation of VueJS life cycle and hook function application

This article describes the life cycle of VueJS and the application of hook functions . If you don’t understand the life cycle of VueJS and the application of hook functions, then we will Get up and read this article. Okay, enough nonsense and let’s get to the point

Hello friends! Fortunately, my article can be seen by you, so at this time you should want to have a more popular understanding of the life cycle of vuejs, and want to know the application scenarios of some of the hook functions in actual development. Take a look directly below. Picture it.

1. The life cycle of vue

Simply put, the life cycle is the time process from the creation to the disappearance of things. Then the life cycle of vue is the process from its creation to its destruction, which includes starting to create, initializing data, compiling templates, mounting dom (rendering), rendering->update->rendering, destruction (uninstalling), etc. Series process.

Then the hook functions are responsible for their own responsibilities. The more commonly used ones are the created and mounted functions. Related business logic can be written in the functions.

2.Hook function

##beforeCreate

Called after instance initialization, data observation and events, and before life cycle initialization configuration.

created

Called after the instance has been created. At this step, the instance has completed the following configuration: data observation, property and methodoperation, and event callbacks. However, the mount phase has not yet started, and the $el attribute is not currently visible.

beforeMount

is called before the mount starts: the related render function is called for the first time, At this time, there is a virtual DOM.

mounted

el is replaced by the newly created vm.$el and is called after it is mounted to the instance. This hook renders to the real DOM.

beforeUpdate

Called before the data is updated, 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 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 the DOM. In most cases, however, you should avoid changing state during this period, as this may cause an infinite loop of updates.

Note: This hook is not called during server-side rendering.

beforeDestroy

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

destroyed

Called after the vue instance is destroyed. After the call, everything indicated by the vue instance will be unbound, all event listeners will be uninstalled and removed, and all child instances will be destroyed.

It’s worth noting: this hook is not called during server-side rendering.

Related recommendations:

##Vuejs search matching function example detailed explanation

The above is the detailed content of Detailed explanation of VueJS life cycle and hook function application. For more information, please follow other related articles on the PHP Chinese website!