Javascript--Vue--生命週期鉤子

什麼是生命週期

對人來講，生命週期就是人的一輩子

同理，對象的生命週期就是對象的一輩子，即

• 建立對象
• 使用對象
• 銷燬對象

Vue的生命週期

在Vue中，他所建立出的實例也是一個對象，因此Vue的生命週期與對象相同

• 簡單來講爲：初始化，運行中，銷燬
• 詳細來講：開始建立，初始化數據，編譯模板，掛載DOM，渲染→更新→渲染，銷燬等過程

生命週期鉤子

對於人來講，在不一樣的生命時期會有不一樣的事要幹，放在對象中一樣適用。

在實例的建立過程當中會經歷一系列的生命週期，在不一樣的時期，會運行一些叫作生命週期鉤子的函數。用戶能夠在生命週期鉤子中添加代碼，使其在實例建立過程當中達到想要的特殊的效果

全部的生命週期鉤子自動綁定this上下文到實例中，所以能夠訪問數據並對屬性和方法進行運算。

箭頭函數沒有this，所以不能使用箭頭函數來定義一個生命週期方法

beforeCreate

在實例初始化以後，數據觀測（data observer）和event/watcher事件配置以前被調用

created

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

beforeMount

在掛載以前被調用，相關的render（渲染）函數首次被調用

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

mounted

實例被掛載後調用，這時el已經被新建立的vm.$el替換

• mounted 不會保證全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠在 mounted 內部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
複製代碼

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

beforeUpdate

數據更新時調用，發生在虛擬DOM打補丁以前，這裏適合在更新以前訪問現有的DOM

• 該鉤子在服務器渲染期間不被調用,由於只有初次渲染會在服務端進行

updated

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

• 注意 updated 不會保證全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠在 updated 裏使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}
複製代碼

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

actived

被keep-alive緩存的組件激活時調用

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

deactivated

被keep-alive緩存的組件停用時調用

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

beforeDestroy

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

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

destroyed

實例銷燬後調用，該鉤子被調用後，對應Vue實例的全部指令都被解綁，全部的事件監聽器被移除，全部的子實例也被銷燬

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

errorCaptured

• 詳細：當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。
• 你能夠在此鉤子中修改組件的狀態。所以在捕獲錯誤時，在模板或渲染函數中有一個條件判斷來繞過其它內容就很重要；否則該組件可能會進入一個無限的渲染循環。

錯誤傳播規則：

• 默認狀況下，若是全局的 config.errorHandler 被定義，全部的錯誤仍會發送它，所以這些錯誤仍然會向單一的分析服務的地方進行彙報。

• 若是一個組件的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤逐個喚起。

• 若是此 errorCaptured 鉤子自身拋出了一個錯誤，則這個新錯誤和本來被捕獲的錯誤都會發送給全局的 config.errorHandler。

• 一個 errorCaptured 鉤子可以返回 false 以阻止錯誤繼續向上傳播。本質上是說「這個錯誤已經被搞定了且應該被忽略」。它會阻止其它任何會被這個錯誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler。

簡單總結

生命週期各個階段經歷分析：

參考博客： blog.csdn.net/jiang770103…