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

This article introduces the knowledge of "what is the life cycle of vue". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In vue, the 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, and the corresponding hook functions are called at different stages of the life cycle to achieve two important functions: component data management and DOM rendering.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the vue life cycle?

We know that vue is an incremental framework for building data-driven web interfaces, so what is the life cycle of vue?

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

The vue life cycle diagram given on the official website:

Let's use this picture to explain the life cycle of vue in detail.

The life cycle of vue is divided into eight phases:

1. Before creation (beforeCreate)

After this stage is initialized for the instance, the data observation and event mechanism are not formed, and the DOM node cannot be obtained.

two。 After creation (created)

In this step, the instance has completed the following configuration: data observation, operation of properties and methods, callback of watch/event events, initialization of data data, but not el. However, the hanging phase has not yet started, and the $el property is not currently visible, which is a common life cycle, because you can call the methods in methods to change the data in data, and the changes can be reflected on the page through the responsive binding of vue, get the calculation 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 intercept the instantiation process in this cycle, so if some data must be obtained to allow access to 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. Before loading (beforeMount)

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 and template in data, and complete the initialization of el and data. Note that it is not yet hung on the html page at this time.

4. After loading (mounted)

When the mount is completed, that is, the HTML in the template is rendered to the page, some ajax operations can be performed at this time, and the mounted will only be executed once.

5. Before update (beforeUpdate)

Called before the data update, before the virtual DOM is re-rendered and patched, the state can be further changed in the hook function without triggering additional repetitive rendering procedures.

6. Updated (updated)

The updated method is loaded when the data defined in data changes.

7. Before destruction (beforeDestroy)

In this step, you can also use this to obtain the instance, and generally do some reset operations in this step, such as clearing the timer in the component and listening for dom events.

8. After destruction (destroyed)

Called after the instance is destroyed, after the call, all event listeners are removed, all sub-instances are destroyed, and the hook is not called during server-side rendering.

That's all for "what is the vue Lifecycle?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.