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

This article mainly introduces "Life cycle case Analysis in Vue". In daily operation, I believe that many people have doubts about life cycle case analysis in Vue. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "Life cycle case Analysis in Vue". Next, please follow the editor to study!

What is the life cycle of vue

The life cycle in Vue refers to a series of processes from creation to destruction of components. Take a look at the following picture of the official document:

You can see from the picture that the entire life cycle of Vue consists of eight states, which in order are:

BeforeCreate

Created

BeforeMount

Mounted

BeforeUpdate

Updated

BeforeDestroy

Destroyed

The life cycle of a Vue component is divided into three phases, as shown in the following figure:

The create phase and destroy phase are executed only once in the life cycle of the component, while the update phase is executed multiple times.

Let's take a look at what the creation phase accomplished:

Looking at what is done in the update phase:

Finally, let's take a look at what is done in the destruction phase:

Take a look at the following code first:

Lifecycle _ window.onload=function () {new Vue ({el:'#app',// 2.0 does not allow mounting to html,body elements data: {msg:'welcome'} Methods: {update () {this.msg= "Welcome" }, destroy () {this.$destroy () }}, / / pre-creation states el and data did not initialize beforeCreate () {console.group ('- beforeCreate pre-creation state -') Console.log ("% c% s", "color:red", "el:" + this.$el); / / undefined console.log ("% c% s", "color:red", "data:" + this.$data) / / undefined console.log ("% c% s", "color:red", "message:" + this.msg) console.log ('component instance has just been created and no data observation and event configuration') }, created () {/ / the initialization of data data is completed. El has no console.group ('- created created status -'); console.log ("% c% s", "color:red", "el:" + this.$el) / / undefined console.log ("% c% s", "color:red", "data:" + this.$data); / / console.log has been initialized ("% c% s", "color:red", "message:" + this.msg) / / has been initialized console.log ("instance has been created, and data observation and event configuration has been carried out")}, beforeMount () {/ / the state before mounting completed the initialization of el and data this.msg= "112233" Console.group ('- beforeMount pre-mount status -'); console.log ("% c% s", "color:red", "el:" + (this.$el)); / / console.log (this.$el) has been initialized Console.log ("% c% s", "color:red", "data:" + this.$data); / has been initialized console.log ("% c% s", "color:red", "message:" + this.msg); / / has been initialized console.log ("template is not mounted before compilation") }, mounted () {/ / commonly used mount end status completes mount console.group ('- mounted mount end status -'); console.log ("% c% s", "color:red", "el:" + this.$el) / / has been initialized console.log (this.$el); console.log ("% c% s", "color:red", "data:" + this.$data); / / has been initialized console.log ("% c% s", "color:red", "message:" + this.msg) / / console.log has been initialized ("after the template has been compiled and mounted, the rendered page will not be visible until the data on the page is displayed")}, beforeUpdate () {/ / pre-update status console.group ('- beforeUpdate pre-update status -') Console.log ("% c% s", "color:red", "el:" + this.$el); console.log (this.$el); console.log ("% c% s", "color:red", "data:" + this.$data) Console.log ("% c% s", "color:red", "message:" + this.msg);}, updated () {/ / update completion status console.group ('- updated update completion status -') Console.log ("% c% s", "color:red", "el:" + this.$el); console.log (this.$el); console.log ("% c% s", "color:red", "data:" + this.$data) Console.log ("% c% s", "color:red", "message:" + this.msg);}, beforeDestroy () {/ / pre-destruction status console.group ('- beforeDestroy pre-destruction status -') Console.log ("% c% s", "color:red", "el:" + this.$el); console.log (this.$el); console.log ("% c% s", "color:red", "data:" + this.$data) Console.log ("% c% s", "color:red", "message:" + this.msg);}, destroyed () {/ / destroy completion status console.group ('- destroyed component destruction completion status -') Console.log ("% c% s", "color:red", "el:" + this.$el); console.log (this.$el); console.log ("% c% s", "color:red", "data:" + this.$data) Console.log ("% c% s", "color:red", "message:" + this.msg)});} update the data destruction component

View the results of the run in the console of the console:

Then click the "Update data" button and you will see that the data bound by input has changed:

Before data update:

After data update:

The print information displayed in the console:

Finally, click the "destroy component" button to view the print information displayed in the console:

In this way, the life cycle of a complete Vue instance ends.

Note: after the Vue component is destroyed, there will be no reaction if the data is updated, because the component has been destroyed

At this point, the study on "Lifecycle case Analysis in Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.