快捷導(dǎo)航

梳理一下vue中的生命周期

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

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

什么是生命周期？

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

以人的一生來做類比，其實就可以簡單粗暴的將生命周期看作人的一生，人這一出生就開始了一段美好（艱難）的旅程，一生中每個成長的階段都會對應(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ù)，這給了用戶在不同階段添加自己的代碼的機(jī)會。

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

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

根據(jù)上圖可知，vue的生命周期一共有8個鉤子函數(shù)，這8個函數(shù)描繪了一個vue的一生，下來我們詳細(xì)來看看這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會在后面的篇幅詳細(xì)講解，這里大家需要知道有這個東西。

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 會在后面的篇幅中進(jìn)行介紹）。
7.beforeDestroy：實例銷毀之前調(diào)用，在這一步，實例仍然完全可用。
8.destroyed：Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

代碼驗證：

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

<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í)行一次，后邊再點擊就不起作用了，測試的時候先把銷毀代碼端注釋掉，然后再放開，進(jìn)行測試！

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ù)向上傳播。