Vue一整個生命週期中會有很多個鉤子函式提供給我們在不同的時期進行不同的操作，先列出所有的鉤子函式:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

下面就進行詳解：

1.在beforeCreate和created之間的生命週期

beforeCreate中其vm例項中的el，data，data中的message都為undefined。

而在created中el還是undefined，而資料已經與data中的屬性進行繫結（放在data中屬性當值發生改變的同時，檢視也會發生變化）

2.created與beforeMount之間的生命週期

首先會判斷vue例項中有沒有el選項，如果有的話則進行下面的編譯，但是如果沒有el選項，則停止生命週期，直到vue例項上呼叫vm.$mount(el)。

繼續編譯，我們來看template引數的有無對生命週期的影響

（1）如果vue例項物件中有這個引數，則把其當作模板編譯成render函式

（2）如果沒有這個引數，則把外部的html作為模板編譯

（3）template中的模板優先順序高於outer HTML模板

在Vue物件中還有render函式，它以createElement作為引數，然後做渲染操做，而且我們可以直接嵌入jsx

new Vue({

    el : "#app",

    render : function (createElement) {

        return createElement("h1","this is createElement")

    }

})

綜合排名優先順序： render函式選項>template選項>outer HTML

3.beforeMount與mounted之間的生命週期

在這個時期vue例項物件應該新增$el成員，並且替換掉掛在的Bom元素

beforeMount的時候就是頁面中的內容還是vue中的佔位符，data中的message資訊沒有被掛在到Bom節點中

mounted時就把vue例項中的data裡的message掛載到BOM節點中去

4.beforeUpdate與updated之間的生命週期

在mounted到beforeUpdate之間當內容發生變化時觸發

在beforeUpdate到updated之間會進行虛擬BOM 的重新渲染

5.beforeDestroy到destroyed之間的生命週期

beforeDestroy鉤子函式在銷燬例項之前呼叫。在這一步，例項還可以完全使用

destroyed鉤子函式在Vue例項銷燬後呼叫。呼叫後，解除安裝watcher，事件監聽，子元件

參考連結：