生命周期先上图（笑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 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8" />
6 <title></title>
7 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
8 </head>
9
10 <body>
11
12 <div id="app">
13
14 <p>{{ message }}</p>
15 </div>
16
17 <script type="text/javascript">
18 (function myFunction() {
19 setTimeout(function() {
20 alert("Hello");
21 }, 3000);
22 })()
23 var app = new Vue({
24 el: '#app',
25 data: {
26 message: "vue is frame"
27 },
28 beforeCreate: function() {
29 console.group('beforeCreate 创建前状态===============》');
30 console.log("%c%s", "color:red", "el : " + this.$el); //undefined
31 console.log("%c%s", "color:red", "data : " + this.$data); //undefined
32 console.log("%c%s", "color:red", "message: " + this.message)
33 },
34 created: function() {
35 console.group('created 创建完毕状态===============》');
36 console.log("%c%s", "color:red", "el : " + this.$el); //undefined
37 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
38 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
39 },
40 beforeMount: function() {
41 console.group('beforeMount 挂载前状态===============》');
42 console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
43 console.log(this.$el);
44 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
45 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
46 },
47 mounted: function() {
48
49 //beforecreated：el 和 data 并未初始化
50 //created:完成了 data 数据的初始化，el没有
51 //beforeMount：完成了 el 和 data 初始化
52 //mounted ：完成挂载
53 //另外在beforeMount，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
54 console.group('mounted 挂载结束状态===============》');
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 beforeUpdate: function() {
61 console.group('beforeUpdate 更新前状态===============》');
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 updated: function() {
68 console.group('updated 更新完成状态===============》');
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 console.log('updated:', document.getElementsByTagName('p').length)
74 },
75 beforeDestroy: function() {
76 console.group('beforeDestroy 销毁前状态===============》');
77 console.log("%c%s", "color:red", "el : " + this.$el);
78 console.log(this.$el);
79 console.log("%c%s", "color:red", "data : " + this.$data);
80 console.log("%c%s", "color:red", "message: " + this.message);
81 },
82 destroyed: function() { //销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
83 console.group('destroyed 销毁完成状态===============》');
84 console.log("%c%s", "color:red", "el : " + this.$el);
85 console.log(this.$el);
86 console.log("%c%s", "color:red", "data : " + this.$data);
87 console.log("%c%s", "color:red", "message: " + this.message)
88 }
89 })
90 //
91 //el:为了将实例化后的vue挂载到指定的dom元素中。
92 //如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。
93 //
94 //注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。
95 //控制台输入更新状态app.message= 'yes !! I do'
96 //app.$destroy();
97 //https://segmentfault.com/a/1190000008010666?utm_source=tag-newest 摘自这个网页加上自己的注释
98 //总结部分 beforecreate : 举个栗子：可以在这加个loading事件
99 //created ：在这结束loading，还做一些初始化，实现函数自执行
100 //mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
101 //beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
102 </script>
103 </body>
104
105 </html>
补充：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选
