每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。

vue2.0主要有以下幾個生命週期鉤子：

beforeCreate,created

beforeMount,mouted

beforeUpdate,updated

activated,deactivated

beforeDestroy,destroyed

errCaptured

官網圖片：

分別介紹這些生命週期鉤子函式在什麼時候觸發：（當頁面一刷  新就會執行beforeCreate,createdbeforeMount,mouted）

beforeCreate：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。$el元素還是undefined,$datd也是undefined

created：在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥，所以$data初始化完成，然而，掛載階段還沒開始，$el 屬性目前不可見是undefined。

而在created和beforeMount這一段期間發生了什麼呢？看官方文件的生命週期圖片可知，在這一期間會判斷有無el選項，如果有el選項就繼續向下編譯，沒有的話就會停止編譯，測試也已註釋掉data裡面的el會發現鉤子函式不會執行beforeMount鉤子，停留在created階段，直到vue例項上呼叫$mount(el),獲取到el選項之後才會向下編譯，獲取到el,會判斷有無template選項，如果有的 話，將其作為模板編譯成render函式，如果沒有template選項，則將外部HTML作為模板編譯（outer HTML），template選項中的模板優先順序要高於outer HTML的優先順序，也就是說如果兩個編譯模板同時存在，會使用template選項中的模板編譯。

在vue物件中有一個render函式，它是以createElement作為引數，然後做渲染操作，看程式碼也就是利用了原生的方法來建立元素

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

頁面中渲染之後就相當於我們直接在html中直接寫<h1></h1>效果相同，如果有render函式選項 ，那麼他的優先順序最高。找個階段主要是給vue例項物件新增$el成員

beforeMount:在掛載開始之前被呼叫（模板編譯之前）$el元素被初始化,$datd也初始化完成

mouted：el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。（模板編譯完成）$el元素被初始化,$datd也初始化完成，請求資料放到mounted裡面。

beforeUpdate:資料更新

updated：資料更新完畢

beforeUpdate和updated生命週期鉤子觸發是在當vue監測到data中的資料發生了改變，就會觸發對應元件的重新渲染，先後呼叫beforeUpdate和鉤子函式updated

activated：keep-alive 元件啟用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。

deactivated：keep-alive 元件停用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。

beforeDestroy：例項銷燬之前呼叫（元件掛載與解除安裝的簡單例子，在父元件裡面放一個button,點選事件來控制組件的顯示與隱藏，隱藏的時候就呼叫destroyed）

destroyed：例項銷燬完成之後呼叫

errCaptured：當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false以阻止該錯誤繼續向上傳播。