首先，每個Vue實例在被創建之前都要經過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉：

可以看到在vue一整個的生命周期中會有很多鉤子函數提供給我們在vue生命周期不同的時刻進行操作, 那么先列出所有的鉤子函數，然后我們再一一詳解:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

先來一波代碼，各位復制在瀏覽器中運行，打開console查看就行了：

運行后打開console可以看到打印出來內容如下:

可以看到一個vue實例在創建過程中調用的幾個生命周期鉤子。

1. 在beforeCreate和created鉤子函數之間的生命周期

在這個生命周期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。

注意看下：此時還是沒有el選項

2. created鉤子函數和beforeMount間的生命周期

在這一階段發生的事情還是比較多的。

首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期，直到在該vue實例上調用vm.$mount(el)。此時注釋掉代碼中:

el:?'#app',

然后運行可以看到到created的時候就停止了：

如果我們在后面繼續調用vm.$mount(el),可以發現代碼繼續向下執行了

vm.$mount(el) //這個el參數就是掛在的dom接點

然后，我們往下看，template參數選項的有無對生命周期的影響。

（1）.如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。

（2）.如果沒有template選項，則將外部HTML作為模板編譯。

（3）.可以看到template中的模板優先級要高于outer HTML的優先級。

修改代碼如下, 在HTML結構中增加了一串html，在vue對象中增加了template選項：

執行后的結果可以看到在頁面中顯示的是：

那么將vue對象中template的選項注釋掉后打印如下信息：

這下就可以想想什么el的判斷要在template之前了~是因為vue需要通過el找到對應的outer template。

在vue對象中還有一個render函數，它是以createElement作為參數，然后做渲染操作，而且我們可以直接嵌入JSX.

newVue({el:'#app', render:function(createElement) { returncreateElement('h1','this is createElement') }})

可以看到頁面中渲染的是：

所以綜合排名優先級：

render函數選項 > template選項 > outer HTML.

可以看到此時是給vue實例對象添加$el成員，并且替換掉掛在的DOM元素。因為在之前console中打印的結果可以看到beforeMount之前el上還是undefined。

4. mounted

注意看下面截圖：

在mounted之前h1中還是通過{{message}}進行占位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內容發生了變化。

5. beforeUpdate鉤子函數和updated鉤子函數間的生命周期

當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鉤子函數。我們在console中輸入：

vm.message?=?'觸發組件更新'

發現觸發了組件的更新：

6.beforeDestroy和destroyed鉤子函數間的生命周期

beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed鉤子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

本文是個人對vue的生命周期的理解，有什么不對的地方還請大牛多多指點~

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的详解vue生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。