什么是生命周期？
生命周期，以個人之淺見，即一個事物從誕生到消亡的一個過程！
以人的一生來做類比，其實就可以簡單粗暴的將生命周期看作人的一生，人這一出生就開始了一段美好（艱難）的旅程，一生中每個成長的階段都會對應(yīng)的去做每個階段該做的事，比如，上幼兒園，小學(xué)，中學(xué)，高中，大學(xué)，工作（比如我就在辛苦的碼字），結(jié)婚等等直到百年以后，塵歸塵，土歸土，這就是人的生命周期！
vue也有這樣的一個生命周期，也會在執(zhí)行到每個階段做一些事情，不同的是vue在每個對應(yīng)的階段是通過生命周期函數(shù)去做的，此刻再去看一下vue官網(wǎng)對生命周期的描述就好理解多了！
vue官網(wǎng)的描述：
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。
簡單來說就是： 在 Vue 從創(chuàng)建實例到最終完全消亡的過程中，會執(zhí)行一系列的方法，用于對應(yīng)當(dāng)前 Vue 的狀態(tài)，這些方法我們叫它：生命周期鉤子！
來看我給大家找的一張圖，可以保存起來，等待后學(xué)學(xué)習(xí)使用的深入，再看這張圖：
根據(jù)上圖可知，vue的生命周期一共有8個鉤子函數(shù)，這8個函數(shù)描繪了一個vue的一生，下來我們詳細來看看這8個生命周期函數(shù)，以便更好的理解Vue的生命周期！
vue的8個生命周期函數(shù)
配合上圖觀看
1.beforeCreate：在實例初始化之后，數(shù)據(jù)觀測 (Data Observer) 和 event/watcher 事件配置之前被調(diào)用。
2.created：在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)、屬性和方法的運算，watch/event 事件回調(diào)；然而，掛載階段還沒開始，$el 屬性目前不可見。
3.beforeMount：在掛載開始之前被調(diào)用，相關(guān)的 render 函數(shù)首次被調(diào)用。
4.mounted：el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。
如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)（PS：注意 mounted 不會承諾所有的子組件也都一起被掛載。
如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：, vm.$nextTick會在后面的篇幅詳細講解，這里大家需要知道有這個東西。
5.beforeUpdate：數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。
6.updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。當(dāng)這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以現(xiàn)在可以執(zhí)行依賴于 DOM 的操作，然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或 watcher 取而代之（PS：計算屬性與 watcher 會在后面的篇幅中進行介紹）。
7.beforeDestroy：實例銷毀之前調(diào)用，在這一步，實例仍然完全可用。
8.destroyed：Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
代碼驗證：
下面的例子我故意將生命周期鉤子函數(shù)的順序打亂，并編號，但它還是會自動按照執(zhí)行順序輸出，就可以驗證其上圖中的流程，你也手動試試吧！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<div id="app"> <button @click="clickCounter()">點擊</button> <p>{{ count }}</p></div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ count: 1 }, methods:{ clickCounter(){ this.count += 1 } }, created: function(){ console.log('2. 實例已經(jīng)創(chuàng)建') }, beforeCreate: function(){ console.log('1. 實例初始化') }, mounted:function(){ console.log('4. 掛載到實例') }, beforeMount:function(){ console.log('3. 掛載開始之前') }, beforeUpdate: () => { console.log('數(shù)據(jù)更新時調(diào)用') }, updated:function(){ console.log('更新數(shù)據(jù)重新渲染DOM') }, beforeDestroy:function(){ console.log('實例銷毀之前調(diào)用') }, destroyed:function(){ console.log('實例銷毀之后調(diào)用') } }) /*點擊頁面銷毀vue對象, 銷毀之后實例將會釋放*/ // 銷毀之后,再次點擊就不起作用了 document.onclick=function(){ app.$destroy(); }; </script> |
注意： 最后我手動將這個實例銷毀了，點擊之后執(zhí)行一次，后邊再點擊就不起作用了，測試的時候先把銷毀代碼端注釋掉，然后再放開，進行測試！
3個關(guān)于vue組件的生命周期鉤子
- activated：keep-alive 組件激活時調(diào)用（PS：與組件相關(guān)，關(guān)于 keep-alive 會在講解組件時介紹）。
- deactivated：keep-alive 組件停用時調(diào)用（PS：與組件相關(guān)，關(guān)于 keep-alive 會在講解組件時介紹）。
- errorCaptured ：當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用，此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串，此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。
寫在最后
生命周期這塊知識點，在這一塊我們只需要有所了解，對其大概使用有個基本的掌握，等待學(xué)習(xí)的深入以及理解的深入，在回過頭來看著一塊的內(nèi)容，結(jié)合Vue的源碼去看會收獲良多！
以上就是梳理一下vue中的生命周期的詳細內(nèi)容，更多關(guān)于vue 生命周期的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6911236502127116302
