生命周期先上图（笑skr个人 ~~）
什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
再上图，对生命周期图的标注
特别值得注意的是created钩子函数和mounted钩子函数的区别
每个钩子函数都在啥时间触发
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
1 1 <!DOCTYPE html> 2 2 <html> 3 3 4 4 <head> 5 5 <meta charset="UTF-8" /> 6 6 <title></title> 7 7 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> 8 8 </head> 9 9 10 10 <body> 11 11 12 12 <div id="app"> 13 13 14 14 <p>{{ message }}</p> 15 15 </div> 16 16 17 17 <script type="text/javascript"> 18 18 (function myFunction() { 19 19 setTimeout(function() { 20 20 alert("Hello"); 21 21 }, 3000); 22 22 })() 23 23 var app = new Vue({ 24 24 el: '#app', 25 25 data: { 26 26 message: "vue is frame" 27 27 }, 28 28 beforeCreate: function() { 29 29 console.group('beforeCreate 创建前状态===============》'); 30 30 console.log("%c%s", "color:red", "el : " + this.$el); //undefined 31 31 console.log("%c%s", "color:red", "data : " + this.$data); //undefined 32 32 console.log("%c%s", "color:red", "message: " + this.message) 33 33 }, 34 34 created: function() { 35 35 console.group('created 创建完毕状态===============》'); 36 36 console.log("%c%s", "color:red", "el : " + this.$el); //undefined 37 37 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 38 38 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 39 39 }, 40 40 beforeMount: function() { 41 41 console.group('beforeMount 挂载前状态===============》'); 42 42 console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化 43 43 console.log(this.$el); 44 44 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 45 45 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 46 46 }, 47 47 mounted: function() { 48 48 49 49 //beforecreated：el 和 data 并未初始化 50 50 //created:完成了 data 数据的初始化，el没有 51 51 //beforeMount：完成了 el 和 data 初始化 52 52 //mounted ：完成挂载 53 53 //另外在beforeMount，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。 54 54 console.group('mounted 挂载结束状态===============》'); 55 55 console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化 56 56 console.log(this.$el); 57 57 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 58 58 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 59 59 }, 60 60 beforeUpdate: function() { 61 61 console.group('beforeUpdate 更新前状态===============》'); 62 62 console.log("%c%s", "color:red", "el : " + this.$el); 63 63 console.log(this.$el); 64 64 console.log("%c%s", "color:red", "data : " + this.$data); 65 65 console.log("%c%s", "color:red", "message: " + this.message); 66 66 }, 67 67 updated: function() { 68 68 console.group('updated 更新完成状态===============》'); 69 69 console.log("%c%s", "color:red", "el : " + this.$el); 70 70 console.log(this.$el); 71 71 console.log("%c%s", "color:red", "data : " + this.$data); 72 72 console.log("%c%s", "color:red", "message: " + this.message); 73 73 console.log('updated:', document.getElementsByTagName('p').length) 74 74 }, 75 75 beforeDestroy: function() { 76 76 console.group('beforeDestroy 销毁前状态===============》'); 77 77 console.log("%c%s", "color:red", "el : " + this.$el); 78 78 console.log(this.$el); 79 79 console.log("%c%s", "color:red", "data : " + this.$data); 80 80 console.log("%c%s", "color:red", "message: " + this.message); 81 81 }, 82 82 destroyed: function() { //销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。 83 83 console.group('destroyed 销毁完成状态===============》'); 84 84 console.log("%c%s", "color:red", "el : " + this.$el); 85 85 console.log(this.$el); 86 86 console.log("%c%s", "color:red", "data : " + this.$data); 87 87 console.log("%c%s", "color:red", "message: " + this.message) 88 88 } 89 89 }) 90 90 // 91 91 //el:为了将实例化后的vue挂载到指定的dom元素中。 92 92 //如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。 93 93 // 94 94 //注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。 95 95 //控制台输入更新状态app.message= 'yes !! I do' 96 96 //app.$destroy(); 97 97 //https://segmentfault.com/a/1190000008010666?utm_source=tag-newest 摘自这个网页加上自己的注释 98 98 //总结部分 beforecreate : 举个栗子：可以在这加个loading事件 99 99 //created ：在这结束loading，还做一些初始化，实现函数自执行 100100 //mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 101101 //beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容 102102 </script> 103103 </body> 104104 105105 </html>
补充：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选