The life cycle of Vue.js is explained in detail

The main content of this article is "detailed explanation of the life cycle of Vue.js". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the detailed explanation of the life cycle of Vue.js".

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

First of all, take a look at the picture of the official website, which gives the life cycle of vue in detail:

It can be divided into eight phases:

BeforeCreate (before creation)

Created (after creation)

BeforeMount (before loading)

Mounted (after loading)

BeforeUpdate (before update)

Updated (updated)

BeforeDestroy (before destruction)

Destroyed (after destruction)

Then use the demo of an example to demonstrate the specific effect:

{{a}} 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 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)})

After running, view the console

Get this:

Then add a change method to the methods:

{{a}} change

What appears after clicking the button is:

This is the life cycle of vue. It's very simple.

At this point, I believe you have a deeper understanding of the "detailed explanation of the life cycle of Vue.js". 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!