foreword
After using Vue for more than a week, I feel that it is still in the primary stage. Although I know how to interact with the backend, I mountedam not very clear about this mount. Zooming in, do vuen't know much about the life cycle of . Only know the simple use, but don't know why, this is quite detrimental to the later stepping on the pit.
Because we sometimes do something in several hook functions, when to do it, in which function to do it, we don't know.
So I started to search first, and found vue2.0no articles about the life cycle. Most of 1.0the versions are introduced. Finally found a good one (will be at the end)
Introduction to vue life cycle
From the above figure, we can clearly see vue2.0which life cycle functions are now included.
life cycle exploration
For the execution order and when to execute, look at the above two figures to have a basic understanding. Below we will combine the code to see the execution of the hook function.
1 ps: The following code can be directly copied and executed
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> 6 </head> 7 <body> 8 9 <div id="app"> 10 <p>{{ message }}</p> 11 </div> 12 13 <script type="text/javascript"> 14 15 var app = new Vue({ 16 el: '#app', 17 data: { 18 message : "xuxiao is boy" 19 }, 20 beforeCreate: function () { 21 console.group('beforeCreate 创建前状态===============》'); 22 console.log("%c%s", "color:red" , "el : " + this.$el); //undefined 23 console.log("%c%s", "color:red","data : " + this.$data); //undefined 24 console.log("%c%s", "color:red","message: " + this.message) 25 }, 26 created:function () { 27 console.group('created status ==============="' ); 28 console.log("%c%s", "color:red","el : " + this .$el); // undefined 29 console.log("%c%s", "color:red","data : " + this .$data); // initialized 30 console.log(" %c%s", "color:red","message: " + this .message); // initialized 31 }, 32 beforeMount: function () { 33 console.group('beforeMount state before mounting== ============="'); 34 console.log("%c%s", "color:red","el : " + ( this .$el)); // has been initialized 35 console.log( this .$el); 36 console.log ("%c%s", "color:red","data : " + this .$data); // Already initialized 37 console.log("%c%s", "color:red","message : " + this .message); // It has been initialized 38 }, 39 mounted: function () { 40 console.group('mounted end state ===============》 ' ); 41 console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 42 console.log(this.$el); 43 console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 44 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 45 }, 46 beforeUpdate: function () { 47 console.group('beforeUpdate 更新前状态===============》'); 48 console.log("%c%s", "color:red","el : " + this.$el); 49 console.log(this.$el); 50 console.log("%c%s", "color:red","data : " + this.$data); 51 console.log("%c%s", "color:red","message: " + this.message); 52 }, 53 updated: function () { 54 console.group('updated 更新完成状态===============》'); 55 console.log("%c%s", "color:red","el :" + this.$el); 56 console.log(this.$el); 57 console.log("%c%s", "color:red","data : " + this.$data); 58 console.log("%c%s", "color:red","message: " + this.message); 59 }, 60 beforeDestroy: function () { 61 console.group('beforeDestroy 销毁前状态===============》'); 62 console.log("%c%s", "color:red","el : " + this.$el); 63 console.log(this.$el); 64 console.log("%c%s", "color:red","data : " + this.$data); 65 console.log("%c%s", "color:red","message: " + this.message); 66 }, 67 destroyed: function () { 68 console.group('destroyed 销毁完成状态===============》'); 69 console.log("%c%s", "color:red","el : " + this.$el); 70 console.log(this.$el); 71 console.log("%c%s", "color:red","data : " + this.$data); 72 console.log("%c%s", "color:red","message: " + this.message) 73 } 74 }) 75 </script> 76 </body> 77 </html>
create is related to mounted
Let chrome's open it in the browser and F12see consoleit
beforecreated : el and data are not initialized
created : completed the initialization of data data, el has no
beforeMount : completed the initialization of el and data
mounted : completed the mount
In addition, in the red mark, we can find that el is still {{message}} , here is the applied Virtual DOM (Virtual Dom) technology, first occupy the pit. The value will be rendered when it is mounted later .
update related
Here we execute the following command in the chrome console
1 app.message= 'yes !! I do';
As you can see below , after the value in data is modified, the update operation will be triggered.
destroy related
Regarding the destruction, it is not very clear for the time being. We execute the following command in the console to destroy the vue instance. After the destruction is complete, we change the value of message again, and vue no longer responds to this action. However, the original DOM element still exists. It can be understood that after the destroy operation is performed, it will no longer be controlled by Vue.
1 app.$destroy();
Lifecycle Summary
With so many hook functions, how do we use them? I think everyone may have such questions, and I have them too, hahaha.
beforecreate : For example: you can add a loading event here
created : end loading here , and do some initialization to realize function self-execution
mounted : Initiate a backend request here, get back the data, and do something with the routing hook
beforeDestroy : Are you sure you want to delete XX? destroyed : the current component has been deleted, clear the related content
Of course, there are more, continue to explore...
write at the end
This article is an understanding of the life cycle of Vue. If there is any error, please correct me, so that the boy can make progress.
It is my greatest honor if it helps you.
By the way, Xiongtai, if it is helpful to you, you might as well click a favorite or recommend it before leaving.
references
https://segmentfault.com/q/10...
http://www.cnblogs.com/gagag/...
Thank you for your articles and questions.
In addition, a new article vuex has been written, and comments are welcome. Portal: Vue2.0 Exploration Road - Vuex Introductory Tutorial and Thinking
I have written a new vue-routerarticle, and comments are welcome. Portal: Vue2.0 Exploration Road - Vue-router introductory tutorial and summary
Article source: https://segmentfault.com/a/1190000008010666