生命周期先上圖（笑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>
mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。
其實兩者比較好理解，通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完后才可以進行，那么mounted就是不二之選