preface :

hook
It's like dividing people's lives from birth to death , You must have started your name at birth , Not in adulthood or death . Or you want to make an appointment at birth , No way . The same is true for components , The internal structure of each stage is different . So a specific hook does a specific thing , such as ajax Data can be obtained in mounted stage .

One ,vue Life cycle introduction

We can see clearly from the above picture that vue2.0 Which life cycle functions are included , To summarize , Simplify the picture in the official document , So I got this picture .

Two , Life cycle research

For execution order and when , Look at the picture above. I have a basic understanding . Let's take a look at the execution of the hook function in combination with the code .
<!DOCTYPE html> <html> <head> <title> Hook function </title> <script type=
"text/javascript" src="vue_2.2.4.js"></script> <body> <div id="app"> <p>{{
message }}</p> <input type="button" @click="change" value=" Update data " /> <input type=
"button" @click="destroy" value=" Destruction " /> </div> <script type="text/javascript">
var vm = new Vue({ el: '#app', data: { message : "Welcome Vue" }, methods:{
change() {this.message = 'Datura is me'; }, destroy() { vm.$destroy(); } },
beforeCreate: function () { console.group('beforeCreate Status before creation ===============》');
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.message);//undefined }, created: function () {
console.group('created Creation completed status ===============》'); console.log("%c%s", "color:red"
,"el : " + this.$el); //undefined console.log("%c%s", "color:green","data : " +
this.$data); //[object Object] => Initialized console.log("%c%s", "color:green",
"message: " + this.message); //Welcome Vue => Initialized }, beforeMount: function ()
{console.group('beforeMount Status before mounting ===============》'); console.log("%c%s",
"color:green","el : " + (this.$el)); // Initialized console.log(this.$el); // Currently hung element
console.log("%c%s", "color:green","data : " + this.$data); // Initialized console.log(
"%c%s", "color:green","message: " + this.message); // Initialized }, mounted: function
() { console.group('mounted Mount end status ===============》'); console.log("%c%s",
"color:green","el : " + this.$el); // Initialized console.log(this.$el); console.log(
"%c%s", "color:green","data : " + this.$data); // Initialized console.log("%c%s",
"color:green","message: " + this.message); // Initialized }, beforeUpdate: function ()
{ alert(" Status before update "); console.group('beforeUpdate Status before update ===============》');
// This is before the page renders new data console.log("%c%s", "color:green","el : " + this.$el); console
.log(this.$el); console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message); alert(" Status before update 2");
},updated: function () { console.group('updated Update completion status ===============》');
console.log("%c%s", "color:green","el : " + this.$el); console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data); console.log("%c%s",
"color:green","message: " + this.message); }, beforeDestroy: function () {
console.group('beforeDestroy Status before destruction ===============》'); 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.message); }, destroyed: function () { console.group('destroyed
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.message) } }) </script> </
body> </html>
1. create and mounted

beforecreated:el and data Not initialized
created: It's done data Initialization of data ,el No,
beforeMount: It's done el and data initialization
mounted : Mount complete

In addition, it is at the red mark , We can find out el still {{message}}, This is the application Virtual
DOM( fictitious Dom) technology , Take the hole first . To the back mounted Render the value when mounting .

2. update

We click on the “ Update data ” Button , Update data . You can see it below data After the value in is modified , Will trigger update Operation of .
ps: be careful beforeUpdate Means view Before layer data changes , no data Triggered before data change in . because Vue Data driven . Pay attention to the pop-up window, it's easy to find .

3. destroy

After destruction , Let's change again message Value of ,vue No longer respond to this action . But the original dom Element still exists , It's understandable , Executed destroy operation , No more vue It's under control . Because of this Vue Instance no longer exists .
We click on the “ Destruction ” Button , Will be specified Vue Instance destroy .

Three , Life cycle summary

beforecreate : Take a chestnut : You can add one here loading event
created : It's over here loading, And do some initialization , Implement function self execution
mounted : Make a backend request here , Get the data back , Do something with routing hook
beforeDestory: You confirm to delete XX Do you ? destoryed : The current component has been deleted , Clear related content

Technology
©2019-2020 Toolsou All rights reserved,
Unity Scene loading asynchronously ( Implementation of loading interface )ESP8266/ESP32 System : Optimize system startup time vue Of v-if And v-show The difference between JS How to operate college examination for the self-taught An overview of Marxism Faster RCNN Explanation of series algorithm principle ( note )CSS architecture design NOI2019 travels IAR Installation and use tutorial sort ( one ) bubble sort