vue生命週期

vue官網生命週期圖

我的理解

---

• beforeCreate

  實例組件剛建立好，配置數據觀測（observe data）以前的階段。el和data還未初始化。
  在此階段，通常處理loading事件之類的事情。

• created

  實例建立完成，完成屬性綁定，這個階段DOM並無生成，$el屬性不存在。el未初始化，data初始化。
  此階段，異步數據的請求操做宜在此調用，實現結束loading，作一些初始化處理，實現一些函數的自執行。

• beforeMounted

  模板編譯以前的階段。el和data完成初始化，computed計算屬性中，只更改一次的屬性會在此階段加載。

• mounted

  完成模板編譯以後的階段。頁面的vue指令編譯成html代碼，例如：<p @lick="fun1">{{message}}</p> 會編譯成 <p onclick="fun1">compile completed!</p>。
  此階段，通常向後端發起請求，取到數據以後，配合鉤子作一些處理。

• beforeUpdated

  數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前，該階段不會觸發附加的重渲染過程，該鉤子在服務器端渲染期間也不會被調用。

• updated

  因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
  當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。
  通常在此鉤子出作統一數據更新操做，若是須要區分不一樣數據的更新，同時操做DOM，可使用nextTick函數。

• activated
  keep-alive 組件激活時調用。
• deactivated
  keep-alive 組件停用時調用。
• beforeDestroy
  實例銷燬以前調用。在這一步，實例仍然徹底可用。
• destroy Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。