1 前言
2
3 在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。
4
5 因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。
6
7 于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的（会放在最后）
8
9 vue生命周期简介
10
11 这里写图片描述
12
13 这里写图片描述
14
15 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。
16
17 生命周期探究
18
19 对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。
20
21 ps:下面代码可以直接复制出去执行
22 <!DOCTYPE html>
23 <html>
24 <head>
25 <title></title>
26 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
27 </head>
28 <body>
29
30 <div id="app">
31 <p>{{ message }}</p>
32 </div>
33
34 <script type="text/javascript">
35
36 var app = new Vue({
37 el: '#app',
38 data: {
39 message : "xuxiao is boy"
40 },
41 beforeCreate: function () {
42 console.group('beforeCreate 创建前状态===============》');
43 console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
44 console.log("%c%s", "color:red","data : " + this.$data); //undefined
45 console.log("%c%s", "color:red","message: " + this.message)
46 },
47 created: function () {
48 console.group('created 创建完毕状态===============》');
49 console.log("%c%s", "color:red","el : " + this.$el); //undefined
50 console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
51 console.log("%c%s", "color:red","message: " + this.message); //已被初始化
52 },
53 beforeMount: function () {
54 console.group('beforeMount 挂载前状态===============》');
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 mounted: function () {
61 console.group('mounted 挂载结束状态===============》');
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 beforeUpdate: function () {
68 console.group('beforeUpdate 更新前状态===============》');
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 updated: function () {
75 console.group('updated 更新完成状态===============》');
76 console.log("%c%s", "color:red","el : " + this.$el);
77 console.log(this.$el);
78 console.log("%c%s", "color:red","data : " + this.$data);
79 console.log("%c%s", "color:red","message: " + this.message);
80 },
81 beforeDestroy: function () {
82 console.group('beforeDestroy 销毁前状态===============》');
83 console.log("%c%s", "color:red","el : " + this.$el);
84 console.log(this.$el);
85 console.log("%c%s", "color:red","data : " + this.$data);
86 console.log("%c%s", "color:red","message: " + this.message);
87 },
88 destroyed: function () {
89 console.group('destroyed 销毁完成状态===============》');
90 console.log("%c%s", "color:red","el : " + this.$el);
91 console.log(this.$el);
92 console.log("%c%s", "color:red","data : " + this.$data);
93 console.log("%c%s", "color:red","message: " + this.message)
94 }
95 })
96 </script>
97 </body>
98 </html>
99 1
100 2
101 3
102 4
103 5
104 6
105 7
106 8
107 9
108 10
109 11
110 12
111 13
112 14
113 15
114 16
115 17
116 18
117 19
118 20
119 21
120 22
121 23
122 24
123 25
124 26
125 27
126 28
127 29
128 30
129 31
130 32
131 33
132 34
133 35
134 36
135 37
136 38
137 39
138 40
139 41
140 42
141 43
142 44
143 45
144 46
145 47
146 48
147 49
148 50
149 51
150 52
151 53
152 54
153 55
154 56
155 57
156 58
157 59
158 60
159 61
160 62
161 63
162 64
163 65
164 66
165 67
166 68
167 69
168 70
169 71
170 72
171 73
172 74
173 75
174 76
175 77
176 1
177 2
178 3
179 4
180 5
181 6
182 7
183 8
184 9
185 10
186 11
187 12
188 13
189 14
190 15
191 16
192 17
193 18
194 19
195 20
196 21
197 22
198 23
199 24
200 25
201 26
202 27
203 28
204 29
205 30
206 31
207 32
208 33
209 34
210 35
211 36
212 37
213 38
214 39
215 40
216 41
217 42
218 43
219 44
220 45
221 46
222 47
223 48
224 49
225 50
226 51
227 52
228 53
229 54
230 55
231 56
232 57
233 58
234 59
235 60
236 61
237 62
238 63
239 64
240 65
241 66
242 67
243 68
244 69
245 70
246 71
247 72
248 73
249 74
250 75
251 76
252 77
253 create 和 mounted 相关
254
255 咱们在chrome浏览器里打开，F12看console就能发现
256
257 beforecreated：el和data 并未初始化
258 created:完成了 data数据的初始化，el没有
259 beforeMount：完成了 el 和 data 初始化
260 mounted ：完成挂载
261 另外在标红处，我们能发现el还是{{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
262
263 这里写图片描述
264
265 update 相关
266
267 这里我们在 chrome console里执行以下命令
268
269 app.message= 'yes !! I do';
270 下面就能看到data里的值被修改后，将会触发update的操作。
271
272 这里写图片描述
273
274 destroy 相关
275
276 有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
277
278 app.$destroy();
279 生命周期总结
280
281 这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。
282
283 beforecreate : 举个栗子：可以在这加个loading事件
284 created ：在这结束loading，还做一些初始化，实现函数自执行
285 mounted： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
286 beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
287 当然，还有更多，继续探索中……
288 写在最后
289
290 本文是一个vue的生命周期的理解，是我在工作之余copySF上 夏日蝉鸣 的文章，感谢作者，希望大家赞助他！
291
292 原文地址：https://segmentfault.com/a/1190000008010666
293
294 参考文献
295
296 https://segmentfault.com/q/1010000007704114?_ea=1431323
297 http://www.cnblogs.com/gagag/p/6246493.html
298 顶
299 0
300 踩
