vue組件的生命週期

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

詳細解釋可參考這裏。

---

一、beforeCreate

　　在實例初始化（new Vue()）以後，數據觀測和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組件激活時調用。
• 該鉤子在服務器端渲染期間不被調用。

---

八、deactivated

• keep-alive組件停用時調用。
• 該鉤子在服務端渲染期間不被調用。

---

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

• 實例銷燬之間調用。在這一步，實例仍然徹底可用。
• 該鉤子在服務端渲染期間不被調用。

---

十、destroyed

• Vue實例銷燬後調用。調用後，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。
• 該鉤子在服務端渲染不會被調用。

---