Vue所有的生命周期鉤子自動綁定在this上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味著你不能使用箭頭函數來定義一個生命周期方法。這是因為箭頭函數綁定了父上下文，因此this與你期待的Vue實例不同。

1、beforeCreate

　　在實例初始化之后，數據觀測和event/watcher時間配置之前被調用。
　　
2、created

　　實例已經創建完成之后被調用。在這一步，實例已經完成以下的配置：數據觀測，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。
　　
3、beforeMount

　　在掛載開始之前被調用：相關的render函數首次被調用。
　　該鉤子在服務器端渲染期間不被調用。
　　
4、mounted

el被新創建的 vm.$el替換，并掛在到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.$el也在文檔內。該鉤子在服務端渲染期間不被調用。
　　
5、beforeUpdate

　　數據更新時調用，發生在虛擬DOM重新渲染和打補丁之前。
　　你可以在這個鉤子中進一步第更改狀態，這不會觸發附加的重渲染過程。
　　該鉤子在服務端渲染期間不被調用。
　　
6、updated

　　由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子。
　　當這個鉤子被調用時，組件DOM已經更新，所以你現在可以執行依賴于DOM的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。
　　該鉤子在服務端渲染期間不被調用。
　　
7、activated

　　keep-alive組件激活時調用。
　　該鉤子在服務器端渲染期間不被調用。
　　
8、deactivated

　　keep-alive組件停用時調用。
　　該鉤子在服務端渲染期間不被調用。
　　
9、beforeDestroy 【類似于React生命周期的componentWillUnmount】

　　實例銷毀之間調用。在這一步，實例仍然完全可用。
　　該鉤子在服務端渲染期間不被調用。
　　
10、destroyed

　　Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

　　

含有keep-alive 生命周期鉤子：

在被keep-alive包含的組件/路由中，會多出兩個生命周期的鉤子: activated 與 deactivated。
在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內的所有嵌套組件中觸發。

activated在組件第一次渲染時會被調用，之后在每次緩存組件被激活時調用。

---

activated調用時機：

第一次進入緩存路由/組件，在mounted后面，beforeRouteEnter守衛傳給 next 的回調函數之前調用：

beforeMount=> 如果你是從別的路由/組件進來(組件銷毀destroyed/或離開緩存deactivated)=>mounted=> activated 進入緩存組件 => 執行 beforeRouteEnter回調

因為組件被緩存了，再次進入緩存路由/組件時，不會觸發這些鉤子：

// beforeCreate created beforeMount mounted 都不會觸發。

所以之后的調用時機是：

組件銷毀destroyed/或離開緩存deactivated => activated 進入當前緩存組件 => 執行 beforeRouteEnter回調// 組件緩存或銷毀，嵌套組件的銷毀和緩存也在這里觸發

---

deactivated：組件被停用(離開路由)時調用

使用了keep-alive就不會調用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因為組件沒被銷毀，被緩存起來了。
這個鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時候做一些事情，你可以放在這個鉤子里。
如果你離開了路由，會依次觸發：

組件內的離開當前路由鉤子beforeRouteLeave => 路由前置守衛 beforeEach =>全局后置鉤子afterEach => deactivated 離開緩存組件 => activated 進入緩存組件(如果你進入的也是緩存路由)// 如果離開的組件沒有緩存的話 beforeDestroy會替換deactivated // 如果進入的路由也沒有緩存的話 全局后置鉤子afterEach=>銷毀 destroyed=> beforeCreate等

---

關于生命周期鉤子需要注意的內容：

• ajax請求最好放在created里面，因為此時已經可以訪問this了，請求到數據就可以直接放在data里面。
  這里也碰到過幾次，面試官問：ajax請求應該放在哪個生命周期。

• 關于dom的操作要放在mounted里面，在mounted前面訪問dom會是undefined。

• 每次進入/離開組件都要做一些事情，用什么鉤子：

  （1）不緩存：
  進入的時候可以用created和mounted鉤子，離開的時候用beforeDestory和destroyed鉤子,beforeDestory可以訪問this，destroyed不可以訪問this。

  （2）緩存了組件：
  緩存了組件之后，再次進入組件不會觸發beforeCreate、created 、beforeMount、 mounted，如果你想每次進入組件都做一些事情的話，你可以放在activated進入緩存組件的鉤子中。
  同理：離開緩存組件的時候，beforeDestroy和destroyed并不會觸發，可以使用deactivated離開緩存組件的鉤子來代替。

---

觸發鉤子的完整順序：

將路由導航、keep-alive、和組件生命周期鉤子結合起來的，觸發順序，假設是從a組件離開，第一次進入b組件：

1- beforeRouteLeave:路由組件的組件離開路由前鉤子，可取消路由離開。

2- beforeEach: 路由全局前置守衛，可用于登錄驗證、全局路由loading等。

3- beforeEnter: 路由獨享守衛

4- beforeRouteEnter: 路由組件的組件進入路由前鉤子。

5- beforeResolve:路由全局解析守衛

6- afterEach:路由全局后置鉤子

7- beforeCreate:組件生命周期，不能訪問this。

8- created:組件生命周期，可以訪問this，不能訪問dom。

9- beforeMount:組件生命周期

10- deactivated: 離開緩存組件a，或者觸發a的beforeDestroy和destroyed組件銷毀鉤子。

11- mounted:訪問/操作dom。

12- activated:進入緩存組件，進入a的嵌套子組件(如果有的話)。

13- 執行beforeRouteEnter回調函數next。

總結

以上是生活随笔為你收集整理的vue组件的生命周期和执行过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。