The path of Vuejs--an understanding of the life cycle of an instance __js

using the Vue framework, familiarity with its lifecycle can allow development to proceed better.

first Look at the official website of the map, the detailed given the Vue life cycle:

It can be divided into 8 stages altogether:

Beforecreate (before creation),

Created (after creation),

Beforemount (before loading),

Mounted (after loading),

BeforeUpdate (before update),

Updated (after the update),

Beforedestroy (before destruction),

Destroyed (after destruction)

Then use an example demo to illustrate the specific effect:

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

<script>

var Myvue = new Vue ({

El: "#app",

Data: {

A: "Vue.js"

},

Beforecreate:function () {

Console.log (pre-created)

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 ("before Renewal");

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 ("before 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>

After clicking the button, it appears:

The specific code is as follows and a personal understanding:

var vm = new Vue ({el: "#container", data:{folder: "What is the life cycle of Vuejs?" I really want to know. 
	"}, methods:{Changedata:function () {This.folder =" immediately known ", this. $el = document.getElementById (" Dede ")}}, Beforecreate:function () {Console.log ("before Creation") Console.log (This)/* Returns an instance object, because according to the website life cycle diagram, the initial of the Vue instance has been completed at this time To work, this point is the instance object itself, so it will definitely return the value * * Console.log (This.folder)/*undefined.
		The same is also according to the official website of the life cycle diagram, at this time did not monitor the data properties, so let alone inside the value of the */}, Created:function () {console.log ("created"); Console.log (This.folder);/* "What the life cycle of Vuejs is like." I really want to know. ", because according to the official website life cycle diagram, after the creation completes the power, at this time has monitored to the data attribute change, certainly also returns the True value the true value to Console.log (this. $el)/*undefined, or ibid, at this stage, the power has not detected there is no El
		property, so it is not recognized $el/}, Beforemount:function () {Console.log ("mount"); Console.log (This.folder);//Return the preset value, for the same reason: (this. $el)/* is called before the start (as the name suggests it is not hanging on, of course, do not know where the root element is,
							And there's no way to render and translate it. Returns the DOM object that the true instance is mounted on, or above, because the El attribute has been detected before this stage, so it is natural to return the truth value. However, the return of a native DOM object at this time, {{folder}}}, is not escaped, which is a further illustration of the actualExample has not been mounted on it/}, Mounted:function () {Console.log ("after hanging");
	Console.log (this.folder)/* Returns the preset value, the reason ditto/Console.log (this. $el)/* mount, before the call back, since it has been mounted, that also know where the root element, of course, can return the correct value AH * * *,
		Beforeupdate:function () {Console.log (before "Update"); Console.log (this.folder); * Call when the data is updated, that is to say, the trigger of this return function is run when the data is updated, here is when the Click event occurs, because the value of the data is changed when clicked, but/* * Console.log (th
		is. $el)/* Returns the new DOM object, after the updated */}, Updated:function () {console.log ("after Update");
		Console.log (This.folder); Console.log (this. $el)/* After the data update is called, the virtual DOM is rendered and patched due to data changes, so you can now perform operations that depend on the DOM. In most cases, however, you should avoid changing the state during this period. If you want to change the state, it is usually best to use the computed attribute or watcher instead of/}, Beforedestroy:function () {Console.log ("before"), and/* Before the instance is destroyed. In this step, the instance is still fully available and how to destroy the instance.
		* * Console.log (This.folder); Console.log (this. $el)}, Destroyed:function () {Console.log (after "destroyed"), called after the instance is destroyed/*vue. After the call, all things indicated by the Vue instance are unbound, all event listeners are removed, and all child instances are destroyed.
		* * Console.log (This.folder); Console.log (this. $el)}})

This is the life cycle of vue, very simple.