首先，參考之前一篇vue生命周期的總結：Vue生命周期總結
接下來我們來分析下官方文檔經典流程圖，每個階段到底發生了什么事情。
1、在beforeCreate和created鈎子函數之間的生命周期
在這個生命周期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。
注意：此時還是沒有el選項
2、created鈎子函數和beforeMount間的生命周期
在這一階段發生的事情還是比較多的。
首先，會判斷對象是否有el選項：如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命周期，直到在該vue實例上調用vm.$mount(el)。
測試：此時注釋掉代碼中:el選項，發現執行到created的時候就停止了：
如果我們在后面繼續調用vm.$mount(el)，可以發現代碼繼續向下執行了
然后，我們往下看，template參數選項的有無對生命周期的影響。
（1）如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。
（2）如果沒有template選項，則將外部HTML作為模板編譯。
（3）可以看到template中的模板優先級要高於outer HTML的優先級。
如果在HTML結構中增加了一串html，在vue對象中增加template選項：會發現顯示template中的內容，如果注釋到template選擇，則才顯示html中的內容。
在vue對象中還有一個render函數，它是以createElement作為參數，然后做渲染操作，而且我們可以直接嵌入JS
new Vue({ el: '#app', render: function(createElement) { return createElement('h1', 'this is createElement') } })//渲染h1標簽元素
所以綜合排名優先級：render函數選項 > template選項 > outer HTML
3、beforeMount和mounted 鈎子函數間的生命周期
可以看到此時是給vue實例對象添加$el成員，並且替換掉掛在的DOM元素。因為在之前console中打印的結果可以看到beforeMount之前el上還是undefined。
4、mounted
在mounted之前p中還是通過{{message}}進行占位的，因為此時還沒有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內容發生了變化。
5、beforeUpdate鈎子函數和updated鈎子函數間的生命周期
當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鈎子函數。
在beforeUpdate可以監聽到data的變化，但是view層沒有被重新渲染，view層的數據沒有變化。等到updated的時候，view層才被重新渲染，數據更新。
6、beforeDestroy和destroyed鈎子函數間的生命周期
beforeDestroy鈎子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed鈎子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。