Reprinted from: https://blog.csdn.net/qq_24073885/article/details/60143856
With Vue framework, familiarity with its life cycle can make development better.
First, let's take a look at the picture on the official website, which gives the life cycle of Vue in detail:
It can be divided into 8 stages in total:
beforeCreate,
created,
beforeMount (before loading),
mounted (after loading),
beforeUpdate,
updated (after updating),
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("before 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("before update");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("Update completed");
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, check the console,
to get this:
Then add a change method to methods:
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
What appears after clicking the button is:
This is the life cycle of vue, very simple.