每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——
例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。
同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
相當(dāng)于各個(gè)階段的回調(diào)。

1. beforeCreate

在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。

image.png

只進(jìn)行了一些必要的初始化操作（例如一些全局的配置和根實(shí)例的一些屬性初始化），此時(shí)data屬性為undefined。

2. created

在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)，property 和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el property 目前尚不可用。

image.png

el還是undefined，而數(shù)據(jù)已經(jīng)與data中的屬性進(jìn)行綁定（放在data中屬性當(dāng)值發(fā)生改變的同時(shí)，視圖也會(huì)發(fā)生變化），在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取。

如果要在created階段中進(jìn)行dom操作，就要將操作都放在 Vue.nextTick() 的回調(diào)函數(shù)中，因?yàn)閏reated() 鉤子函數(shù)執(zhí)行的時(shí)候 DOM 其實(shí)并未進(jìn)行任何渲染

/*
從created到beforeMount的過程中，

首先會(huì)判斷vue實(shí)例中有沒有el選項(xiàng)，如果有的話則進(jìn)行下面的編譯，
但是如果沒有el選項(xiàng)，則停止生命周期，直到vue實(shí)例上調(diào)用vm.$mount(el)。

如果有el，再判斷是否有template參數(shù)，如果有，
則把其當(dāng)作模板編譯成render函數(shù)，如果沒有，
則把外部的html作為模板編譯。template中的模板優(yōu)先級(jí)高于outer HTML模板。

在vue對(duì)象中還有一個(gè)render函數(shù)，它是以createElement作為參數(shù)，然后做渲染操作，而且我們可以直接嵌入JSX.
綜合排名優(yōu)先級(jí)：render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.
*/

3. beforeMount

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

image.png

載入前（完成了data和el數(shù)據(jù)初始化），但是頁面中的內(nèi)容還是vue中的占位符，
，data中的message信息沒有被掛在到Bom節(jié)點(diǎn)中，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取

4. mounted

實(shí)例被掛載后調(diào)用，這時(shí) el 被新創(chuàng)建的 vm.$el 替換了。如果根實(shí)例掛載到了一個(gè)文檔內(nèi)的元素上，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。

注意 mounted 不會(huì)保證所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢，可以在 mounted 內(nèi)部使用 vm.$nextTick：

可以在這一層操作dom節(jié)點(diǎn)。

5. beforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。

該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。

6. updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher 取而代之。

注意 updated 不會(huì)保證所有的子組件也都一起被重繪。如果你希望等到整個(gè)視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick：
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

7. activated

被 keep-alive 緩存的組件激活時(shí)調(diào)用。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

8.deactivated

被 keep-alive 緩存的組件停用時(shí)調(diào)用。

9. beforeDestroy

實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

10. destroyed

實(shí)例銷毀后調(diào)用。該鉤子被調(diào)用后，對(duì)應(yīng) Vue 實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽器被移除，所有的子實(shí)例也都被銷毀。

11. errorCaptured

當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。

部分內(nèi)容借鑒至
原文鏈接：https://blog.csdn.net/wasbb_mm/article/details/83861456