vue組件的生命週期

先來張組件生命週期的示意圖：

 

 文檔裏是這樣描述的：你不須要立馬弄明白全部的東西，不過之後它會有幫助。傳送門.

Vue2.0的生命週期鉤子一共有10個，一樣結合官方文檔做出了下表

生命週期鉤子	詳細
beforeCreate	在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
created	實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount	在掛載開始以前被調用：相關的 render 函數首次被調用。
mounted	el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
beforeUpdate	數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
updated	因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。
activated	keep-alive 組件激活時調用。
deactivated	keep-alive 組件停用時調用。
beforeDestroy	實例銷燬以前調用。在這一步，實例仍然徹底可用。
destroyed	Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

 

Vue全部的生命週期鉤子自動綁定在this上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法。這是由於箭頭函數綁定了父上下文，所以this與你期待的Vue實例不一樣。

一、beforeCreate

　　在實例初始化以後，數據觀測和event/watcher時間配置以前被調用。

二、created

　　實例已經建立完成以後被調用。在這一步，實例已經完成如下的配置：數據觀測，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。

三、beforeMount

　　在掛載開始以前被調用：相關的render函數首次被調用。

　　該鉤子在服務器端渲染期間不被調用。

四、mounted

　　el被新建立的vm.$el替換，並掛在到實例上去以後調用該鉤子函數。若是root實例掛載了一個文檔內元素，當mounted被調用時vm.$el也在文檔內。

　　該鉤子在服務端渲染期間不被調用。

五、beforeUpdate

　　數據更新時調用，發生在虛擬DOM從新渲染和打補丁以前。

　　你能夠在這個鉤子中進一步第更改狀態，這不會觸發附加的重渲染過程。

　　該鉤子在服務端渲染期間不被調用。

六、updated

　　因爲數據更改致使的虛擬DOM從新渲染和打補丁，在這以後會調用該鉤子。

　　當這個鉤子被調用時，組件DOM已經更新，因此你如今能夠執行依賴於DOM的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。

　　該鉤子在服務端渲染期間不被調用。

七、activated

　　keep-alive組件激活時調用。

　　該鉤子在服務器端渲染期間不被調用。

(若是你使用keep-alive進行緩存， 又但願每次切換組件的時候更新數據，那麼更新數據的請求方式必須寫在該鉤子函數裏)

八、deactivated

　　keep-alive組件停用時調用。

　　該鉤子在服務端渲染期間不被調用。

九、beforeDestroy 【相似於React生命週期的componentWillUnmount】

　　實例銷燬以前調用。在這一步，實例仍然徹底可用。

　　該鉤子在服務端渲染期間不被調用。

十、destroyed

　　Vue實例銷燬後調用。調用後，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

　　該鉤子在服務端渲染不會被調用。

 很好的一篇博文：

　　　　　　　　博文