The life cycle of Vue JS (read it)

With the Vue framework, familiarity with its life cycle can make development better.

First take a look at the official website map, detailed to give the Vue life cycle:

It can be divided into 8 stages altogether:

Beforecreate (before creation),

Created (after creation),

Beforemount (pre-loaded),

Mounted (after loading),

BeforeUpdate (before the update),

Updated (after the update),

Beforedestroy (before destruction),

Destroyed (after destruction)

Then use an example demo to demonstrate the specific effect:

<div id=app>{{a}}</div>

<script>

var Myvue = new Vue ({

El: "#app",

Data: {

A: "Vue.js"

},

Beforecreate:function () {

Console.log ("Pre-creation")

Console.log (THIS.A)

Console.log (this. $el)

},

Created:function () {

Console.log ("After creation");

Console.log (THIS.A)

Console.log (this. $el)

},

Beforemount:function () {

Console.log ("Before Mount")

Console.log (THIS.A)

Console.log (this. $el)

},

Mounted:function () {

Console.log ("after Mount")

Console.log (THIS.A)

Console.log (this. $el)

},

Beforeupdate:function () {

Console.log ("Pre-update");

Console.log (THIS.A)

Console.log (this. $el)

},

Updated:function () {

Console.log ("Update Complete");

Console.log (THIS.A);

Console.log (this. $el)

},

Beforedestroy:function () {

Console.log ("Prior to destruction");

Console.log (THIS.A)

Console.log (this. $el)

Console.log (this. $el)

},

Destroyed:function () {

Console.log ("destroyed");

Console.log (THIS.A)

Console.log (this. $el)

}

});

</script>

After running, view the console,

Get this:

Then add a change method to the methods:

<div Id=app>{{a}}
<button v-on:click= "Change" >change</button>
</div>

When you click the button, it appears:

This is the life cycle of vue, very simple.

The life cycle of Vue JS (read it)