快捷導(dǎo)航

梳理一下vue中的生命周期

更新時(shí)間：2020年12月30日 11:20:28 作者：CRMEB技術(shù)團(tuán)隊(duì)

看過很多人講vue的生命周期，但總是被繞的云里霧里，尤其是自學(xué)的同學(xué)，可能js的基礎(chǔ)也不是太牢固，聽起來(lái)更是吃力，那我就已個(gè)人之淺見，以大白話的方式給大家梳理一下，如有不準(zhǔn)確的地方，歡迎指正！

什么是生命周期？

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

以人的一生來(lái)做類比，其實(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)單來(lái)說(shuō)就是：在 Vue 從創(chuàng)建實(shí)例到最終完全消亡的過程中，會(huì)執(zhí)行一系列的方法，用于對(duì)應(yīng)當(dāng)前 Vue 的狀態(tài)，這些方法我們叫它：生命周期鉤子！

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

根據(jù)上圖可知，vue的生命周期一共有8個(gè)鉤子函數(shù)，這8個(gè)函數(shù)描繪了一個(gè)vue的一生，下來(lái)我們?cè)敿?xì)來(lái)看看這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)擊頁(yè)面銷毀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è)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用，此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串，此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。