什么是生命周期？

生命周期，以個(gè)人之淺見，即一個(gè)事物從誕生到消亡的一個(gè)過程！

以人的一生來做類比，其實(shí)就可以簡(jiǎn)單粗暴的將生命周期看作人的一生，人這一出生就開始了一段美好（艱難）的旅程，一生中每個(gè)成長(zhǎng)的階段都會(huì)對(duì)應(yīng)的去做每個(gè)階段該做的事，比如，上幼兒園，小學(xué)，中學(xué)，高中，大學(xué)，工作（比如我就在辛苦的碼字），結(jié)婚等等直到百年以后，塵歸塵，土歸土，這就是人的生命周期！

vue也有這樣的一個(gè)生命周期，也會(huì)在執(zhí)行到每個(gè)階段做一些事情，不同的是vue在每個(gè)對(duì)應(yīng)的階段是通過生命周期函數(shù)去做的，此刻再去看一下vue官網(wǎng)對(duì)生命周期的描述就好理解多了！

vue官網(wǎng)的描述：

每個(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ì)。

簡(jiǎn)單來說就是： 在 Vue 從創(chuàng)建實(shí)例到最終完全消亡的過程中，會(huì)執(zhí)行一系列的方法，用于對(duì)應(yīng)當(dāng)前 Vue 的狀態(tài)，這些方法我們叫它：生命周期鉤子！

來看我給大家找的一張圖，可以保存起來，等待后學(xué)學(xué)習(xí)使用的深入，再看這張圖：

根據(jù)上圖可知，vue的生命周期一共有8個(gè)鉤子函數(shù)，這8個(gè)函數(shù)描繪了一個(gè)vue的一生，下來我們?cè)敿?xì)來看看這8個(gè)生命周期函數(shù)，以便更好的理解Vue的生命周期！

vue的8個(gè)生命周期函數(shù)

配合上圖觀看

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

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

3.beforeMount：在掛載開始之前被調(diào)用，相關(guān)的 render 函數(shù)首次被調(diào)用。

4.mounted：el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。

如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)（PS：注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載。

如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：, vm.$nextTick會(huì)在后面的篇幅詳細(xì)講解，這里大家需要知道有這個(gè)東西。

5.beforeUpdate：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiā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 取而代之（PS：計(jì)算屬性與 watcher 會(huì)在后面的篇幅中進(jìn)行介紹）。7.beforeDestroy：實(shí)例銷毀之前調(diào)用，在這一步，實(shí)例仍然完全可用。8.destroyed：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

代碼驗(yàn)證：

下面的例子我故意將生命周期鉤子函數(shù)的順序打亂，并編號(hào)，但它還是會(huì)自動(dòng)按照?qǐng)?zhí)行順序輸出，就可以驗(yàn)證其上圖中的流程，你也手動(dòng)試試吧！

<div id='app'> <button @click='clickCounter()'>點(diǎn)擊</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. 實(shí)例已經(jīng)創(chuàng)建’) }, beforeCreate: function(){ console.log(’1. 實(shí)例初始化’) }, mounted:function(){ console.log(’4. 掛載到實(shí)例’) }, beforeMount:function(){ console.log(’3. 掛載開始之前’) }, beforeUpdate: () => { console.log(’數(shù)據(jù)更新時(shí)調(diào)用’) }, updated:function(){ console.log(’更新數(shù)據(jù)重新渲染DOM’) }, beforeDestroy:function(){ console.log(’實(shí)例銷毀之前調(diào)用’) }, destroyed:function(){ console.log(’實(shí)例銷毀之后調(diào)用’) } }) /*點(diǎn)擊頁面銷毀vue對(duì)象, 銷毀之后實(shí)例將會(huì)釋放*/ // 銷毀之后,再次點(diǎn)擊就不起作用了 document.onclick=function(){ app.$destroy(); }; </script>

注意： 最后我手動(dòng)將這個(gè)實(shí)例銷毀了，點(diǎn)擊之后執(zhí)行一次，后邊再點(diǎn)擊就不起作用了，測(cè)試的時(shí)候先把銷毀代碼端注釋掉，然后再放開，進(jìn)行測(cè)試！

3個(gè)關(guān)于vue組件的生命周期鉤子 activated：keep-alive 組件激活時(shí)調(diào)用（PS：與組件相關(guān)，關(guān)于 keep-alive 會(huì)在講解組件時(shí)介紹）。 deactivated：keep-alive 組件停用時(shí)調(diào)用（PS：與組件相關(guān)，關(guān)于 keep-alive 會(huì)在講解組件時(shí)介紹）。 errorCaptured ：當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用，此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串，此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。 寫在最后

生命周期這塊知識(shí)點(diǎn)，在這一塊我們只需要有所了解，對(duì)其大概使用有個(gè)基本的掌握，等待學(xué)習(xí)的深入以及理解的深入，在回過頭來看著一塊的內(nèi)容，結(jié)合Vue的源碼去看會(huì)收獲良多！

以上就是梳理一下vue中的生命周期的詳細(xì)內(nèi)容，更多關(guān)于vue 生命周期的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！