什麼是生命週期？

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

以人的一生來做類比，其實就可以簡單粗暴的將生命週期看作人的一生，人這一出生就開始了一段美好（艱難）的旅程，一生中每個成長的階段都會對應的去做每個階段該做的事，比如，上幼兒園，小學，中學，高中，大學，工作（比如我就在辛苦的碼字），結婚等等直到百年以後，塵歸塵，土歸土，這就是人的生命週期！

vue也有這樣的一個生命週期，也會在執行到每個階段做一些事情，不同的是vue在每個對應的階段是通過生命週期函式去做的，此刻再去看一下vue官網對生命週期的描述就好理解多了！

vue官網的描述：

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。

簡單來說就是： 在 Vue 從建立例項到最終完全消亡的過程中，會執行一系列的方法，用於對應當前 Vue 的狀態，這些方法我們叫它：生命週期鉤子！

來看我給大家找的一張圖，可以儲存起來，等待後學學習使用的深入，再看這張圖：

根據上圖可知，vue的生命週期一共有8個鉤子函式，這8個函式描繪了一個vue的一生，下來我們詳細來看看這8個生命週期函式，以便更好的理解Vue的生命週期！

vue的8個生命週期函式

配合上圖觀看

1.beforeCreate：在例項初始化之後，資料觀測 (Data Observer) 和 event/watcher 事件配置之前被呼叫。

2.created：在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)、屬性和方法的運算，watch/event 事件回撥；然而，掛載階段還沒開始，$el 屬性目前不可見。

3.beforeMount：在掛載開始之前被呼叫，相關的 render 函式首次被呼叫。

4.mounted：el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。

如果 root 例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el 也在文件內（PS：注意 mounted 不會承諾所有的子元件也都一起被掛載。

如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：,vm.$nextTick會在後面的篇幅詳細講解，這裡大家需要知道有這個東西。

5.beforeUpdate：資料更新時呼叫，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問現有的 DOM，比如手動移除已新增的事件監聽器。

程式碼驗證：

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

<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. 例項已經建立')
  },beforeCreate: function(){
   console.log('1. 例項初始化')
  },mounted:function(){
   console.log('4. 掛載到例項')
  },beforeMount:function(){
   console.log('3. 掛載開始之前')
  },beforeUpdate: () => {
   console.log('資料更新時呼叫')
  },updated:function(){
   console.log('更新資料重新渲染DOM')
  },beforeDestroy:function(){
   console.log('例項銷燬之前呼叫')
  },destroyed:function(){
   console.log('例項銷燬之後呼叫')
  }
  })
  
  /*點選頁面銷燬vue物件,銷燬之後例項將會釋放*/
  // 銷燬之後,再次點選就不起作用了
  document.onclick=function(){
   app.$destroy();
  };
 </script>

注意： 最後我手動將這個例項銷燬了，點選之後執行一次，後邊再點選就不起作用了，測試的時候先把銷燬程式碼端註釋掉，然後再放開，進行測試！

3個關於vue元件的生命週期鉤子

1. activated：keep-alive 元件啟用時呼叫（PS：與元件相關，關於 keep-alive 會在講解元件時介紹）。
2. deactivated：keep-alive 元件停用時呼叫（PS：與元件相關，關於 keep-alive 會在講解元件時介紹）。
3. errorCaptured ：當捕獲一個來自子孫元件的錯誤時被呼叫，此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串，此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。
   

寫在最後

生命週期這塊知識點，在這一塊我們只需要有所瞭解，對其大概使用有個基本的掌握，等待學習的深入以及理解的深入，在回過頭來看著一塊的內容，結合Vue的原始碼去看會收穫良多！

以上就是梳理一下vue中的生命週期的詳細內容，更多關於vue 生命週期的資料請關注我們其它相關文章！