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

This article mainly talks about "what is the life cycle of Vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the life cycle of Vue"?

A brief introduction to the life cycle

1. Life cycle is also called: life cycle callback function, life cycle function, life cycle hook.

two。 The life cycle is: some specially named functions that Vue calls for us at critical moments.

3. The name of the lifecycle function cannot be changed, but the specific content of the function is written by the programmer according to the requirements.

4. The this in the lifecycle function points to a vm or component instance object.

In the teaching of Vue official website, eight life cycle functions are listed in the Vue instance = > instance life cycle hook.

They are:

1.beforeCreate ()

2.created ()

3.beforeMount ()

4.mounted () (key)

5.beforeUpdate ()

6.updated ()

7.beforeDestroy () (key)

8.destroyed ()

These eight lifecycle functions cover the process from creation to destruction of Vue instances, that is, before creation, before creation, before mounting, before mounting, before updating, before updating, before destroying, and after destroying.

BeforeCreate and createdbeforeCreate ()

When using beforeCreate, the data in data and methods in methods cannot be accessed through vm because the creation has not been completed.

Created ()

When using created, because the creation has been completed, you can access the data in data and methods in methods through vm.

BeforeMount and mountedbeforeMount ()

When using beforeMount, because the mount is not yet complete, the content of the page is rendered as a DOM structure that has not been compiled by Vue, and all operations on DOM at this time do not work. The reason why it does not work is that when running to mounted, the system will convert the virtual DOM in memory into a real DOM to insert the page, so the modified content will be overwritten.

Mounted () (important)

When using mounted, the mount is completed, and the content rendered on the page becomes DOM compiled by Vue, and the operation on DOM is valid at this time. When it is run, the initialization process is over. Generally, the following operations are carried out here: start the timer, send network requests, subscribe messages and other initialization operations.

BeforeUpdate and updated

When the data changes, it will be updated using beforeUpdate and updated

BeforeUpdate ()

When using beforeUpdate, the data has not been updated yet, and the data has been successfully obtained, but it has not yet been displayed on the page. So there is the phenomenon that the data is new but the old data is displayed on the page. At this time, the page has not been synchronized with the data.

Updated ()

When using updated, the update is complete by this time. At this time, the data is new data, and what is displayed on the page is also new data. At this point, the page is synchronized with the data.

BeforeDestroy and destroyed

When a Vue instance is to be destroyed, beforeDestroy and destroyed are used to destroy it.

BeforeDestroy () (important)

When using beforeDestroy, the Vue instance has not been completely destroyed, and the data, methods, directives, and so on in the vm are still available. However, at this time, the modified data will not update the page. Operations such as turning off timers, unsubscribing information, and unbinding custom events are usually carried out at this stage. Of the eight lifecycle functions, beforeDestroy and mounted are more frequently used.

Destroyed ()

When using destroyed, the Vue instance is completely destroyed.

At this point, I believe you have a deeper understanding of "what is the life cycle of Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.