Vue的生命周期鈎子（8個回調函數+5個模塊化函數）
生命周期:
- 又名：生命周期回調函數、生命周期函數、生命周期鈎子。
- 是什么：Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。
- 生命周期函數的名字不可更改，但函數的具體內容是程序員根據需求編寫的。
- 生命周期函數中的this指向是vm或組件實例對象。
常用的生命周期鈎子:
- mounted：發送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等[初始化操作]
- beforeDestroy：清除定時器、解綁自定義事件、取消訂閱消息等[收尾工作]
關於銷毀Vue實例
- 銷毀后借助Vue開發者工具看不到任何信息。
- 銷毀后自定義事件會失效，但原生DOM事件依然有效。
- 般不會再beforeDestroy操作數據，因為即便操作數據，也不會再觸發更新流程了。
| 生命周期函數 | 場景 | 備注 |
|---|---|---|
| beforeCreate | 此時：組件的選項對象還未創建，el 和 data 並未初始化，無法通過vm訪問到data中的數據、methods中的方法。 | |
| created | 此時：實例已經創建完成之后被調用，在這一步，實例已完成以下配置：數據觀測、屬性和方法的運算，watch/event事件回調，完成了data 數據的初始化，el沒有。可以通過vm訪問到data中的數據、methods中配置的方法。 | $el屬性目前不可見，這是一個常用的生命周期，因為你可以調用methods中的方法，改變data中的數據，並且修改可以通過vue的響應式綁定體現在頁面上，，獲取computed中的計算屬性等等，通常我們可以在這里對實例進行預處理，值得注意的是，這個周期中是沒有什么方法來對實例化過程進行攔截的，因此假如有某些數據必須獲取才允許進入頁面的話，並不適合在這個方法發請求，建議在組件路由鈎子beforeRouteEnter中完成 |
| beforeMount | 此時： 1.頁面呈現的是未經Vue編譯的DOM結構。 2.所有對DOM的操作，最終都不奏效。 |
|
| mounted | 此時： 1.頁面中呈現的是經過Vue編譯的DOM 2.對DOM的操作均有效(盡可能避免)。至此初始化過程結束， |
此時一般可以做一些ajax操作，mounted只會執行一次。 |
| beofreUpdate | 此時：數據是新的，但頁面是舊的，即：頁面尚末和數據保持同 | 可以在該鈎子中進一步地更改狀態，不會觸發附加地重渲染過程 |
| updated | 此時：數據是新的，頁面也是新的，即：頁面和數據保持同步。 | 可以執行依賴於DOM的操作，然后在大多是情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環，該鈎子在服務器端渲染期間不被調用 |
| beforeDestroy | 在實例銷毀之前調用，實例仍然完全可用； | 這一步還可以用this來獲取實例； 一般在這一步做一些重置的操作，比如清除掉組件中的定時器 和 監聽的dom事件 |
| destroyed | 在實例銷毀之后調用 | 調用后，所以的事件監聽器會被移出，所有的子實例也會被銷毀，該鈎子在服務器端渲染期間不被調用 |
其它三個鈎子函數
類型：Function
- activated（激活前） ：keep-alive專屬，組件被激活時調用
- deactivated（激活后） ：keep-alive專屬，組件被銷毀時調用
類型：(err: Error, instance: Component, info: string) => ?boolean
- errorCaptured：在捕獲一個來自后代組件的錯誤時被調用。此鈎子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鈎子可以返回
false以阻止該錯誤繼續向上傳播。- 你可以在此鈎子中修改組件的狀態。因此在捕獲錯誤時，在模板或渲染函數中有一個條件判斷來繞過其它內容就很重要；不然該組件可能會進入一個無限的渲染循環。
Vue3新增兩個鈎子
類型均為：(e: DebuggerEvent) => void
-
renderTracked：跟蹤虛擬 DOM 重新渲染時調用。鈎子接收
debugger event作為參數。此事件告訴你哪個操作跟蹤了組件以及該操作的目標對象和鍵。 -
renderTriggered：當虛擬 DOM 重新渲染被觸發時調用。和
renderTracked類似，接收debugger event作為參數。此事件告訴你是什么操作觸發了重新渲染，以及該操作的目標對象和鍵。
官網的生命周期圖解
Vue子組件和父組件執行順序
- 加載渲染過程：
beforeCreate(父) —>created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父) - 更新過程：
beforeUpdate(父) —>beforeUpdate(子) —>update(子) —>update(父) - 銷毀過程：
beforeDestory(父) —>beforeDestory(子) —>destoryed(子) —>destoryed(父)