簡介

vue的生命週期大致分為四個過程，分別是建立過程、掛載過程、更新過程、銷燬過程，對應 8 個生命週期鉤子函式，分別是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed。生命週期就是指 vue例項 從建立到銷燬 所經歷的這一系列過程。

• beforeCreate：此時生命週期、vue例項的掛載目標 el 和 data 都還未初始化，不能訪問data、computed、watch、methods上的資料和方法
• created：此時生命週期、data都已初始化完成，可以訪問data、computed、watch、methods上的資料和方法；但vue例項的掛載目標 el 還未初始化完成，所以不能訪問dom元素。可在此進行前後端的資料互動，請求後端資料
• beforeMount：在dom節點被掛載之前被呼叫
• mounted：此時vue例項的掛載目標 el 已經掛載到文件中，可進行dom操作（但子元件可能還未掛載完成，可通過 this.$nextTick(() => {}) 訪問子元件）
• beforeUpdate：此生命週期在資料更新時呼叫，此時dom節點還未更新，可訪問更新之前的dom元素
• updated：此時dom節點都已更新，可進行dom操作（同mounted一樣，此時子元件可能還未掛載完成），但我們應避免在此期間更改狀態，若要相應狀態改變，最好使用computed和watch代替
• beforeDestory：例項銷燬之前呼叫，此時例項仍然完全可用；此時會做一些 監聽的移除、定時器的移除、事件的解綁 操作
• destoryed：例項銷燬之後呼叫，此時資料和檢視的關係將會斷開

此外，還新增了三個生命週期：activated、deactivated、errorCaptured

• activated：被 keep-alive 快取的元件啟用時呼叫（只有被包裹在 keep-alive 中的元件，才有activated生命週期）

• deactivated：被 keep-alive 快取的元件停用時呼叫（只有被包裹在 keep-alive 中的元件，才有deactivated生命週期）

• errorCaptured：當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子函式接收三個引數：錯誤物件、發生錯誤的元件例項、一個包含錯誤來源資訊的字串。它可以返回 false 來阻止該錯誤繼續向上傳播

  PS：使用 keep-alive 會將資料保留在記憶體中，如果要在每次進入頁面的時候獲取最新的資料，需要在 activated 階段獲取資料，承擔原來 created 鉤子函式中獲取資料的任務
  

父子元件的生命週期執行順序

父元件 beforeCreate、父元件 created、父元件 beforeMount、子元件 beforeCreate、子元件 created、子元件 beforeMount、子元件 mounted、父元件 mounted

父元件 beforeUpdate、子元件 beforeUpdate、子元件 updated、父元件 updated

父元件 beforeDestroy、子元件 beforeDestroy、子元件 destroyed、父元件 destroyed