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 踩