前端培訓-中級階段（34）- Vue 生命週期

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

生命週期鉤子

生命週期鉤子的 this 上下文指向調用它的 Vue 實例，所以你 不能使用箭頭函數來定義一個生命週期方法 (例如created: () => this.fun())。

測試頁面，能夠看到箭頭函數的全部值都取不到，由於箭頭函數的this不能夠修改。

beforeCreate

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

1. 什麼叫 數據觀測 (data observer) 和 event/watcher 事件配置以前被調用？
   能夠經過上面的測試頁面看到 beforeCreate undefined undefined undefined，在這個鉤子函數中，咱們訪問不到 data 中的變量，也訪問不到 methods 中的方法

created

在實例建立完成後被當即調用。
在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。

在這一步數據已經被觀測，咱們的方法也均可以使用，通常在這步的時候開始拉接口數據。可是如今尚未掛載到DOM上，$el 屬性目前沒有值。

beforeMount

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

這一步會判斷是否有 el 參數，沒有的話會等待 vm.$mount(el) 再觸發。有 el 參數的話，開始判斷是否有 template 參數（這裏不能用只有運行時環境的 Vue，由於須要解析模版），有的話解析模板渲染成 render 函數，沒有會使用 el 的 innerHTML 編譯。

1. beforeMount 以前處理流程

   1. 有 el 參數

      1. 存在 render 函數，直接用 render 函數渲染
      2. 存在 template 參數，解析 template 參數爲 render 函數，而後渲染
      3. 上述都不存在，使用 el 的 innerHTML 編譯爲 render 函數，而後渲染

   2. 無 el 參數

      1. 等待 vm.$mount(el)

mounted

實例被 掛載後調用，這時 DOM 被替換了。

注意 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 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用 計算屬性 或 watcher 取而代之。

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

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

activated

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

首次渲染的時候不會觸發，再次激活的時候會觸發（再次激活時 created、mounted 不會觸發）。
因此若是你想再次進入時更新數據，那麼須要在這裏處理。

deactivated

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

beforeDestroy

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

這裏通常要注意解綁事件，否則就是內存泄漏。

destroyed

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

errorCaptured

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例 以及一個 包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

你能夠在此鉤子中修改組件的狀態。所以在捕獲錯誤時，在模板或渲染函數中有一個條件判斷來繞過其它內容就很重要；否則該組件可能會進入一個無限的渲染循環。

錯誤傳播規則

• 默認狀況下，若是全局的 config.errorHandler 被定義，全部的錯誤仍會發送它，所以這些錯誤仍然會向單一的分析服務的地方進行彙報。
• 若是一個組件的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤逐個喚起。
• 若是此 errorCaptured 鉤子自身拋出了一個錯誤，則這個新錯誤和本來被捕獲的錯誤都會發送給全局的 config.errorHandler。
• 一個 errorCaptured 鉤子可以返回 false 以阻止錯誤繼續向上傳播。本質上是說「這個錯誤已經被搞定了且應該被忽略」。它會阻止其它任何會被這個錯誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler。

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. https://cn.vuejs.org/v2/api/#...