網上有一些哥們分享的面試題有關於vue生命週期的 官方給出下面的圖來進行解釋，不過直接看還是不太明白，以下記錄是自己的理解和其他人的經驗總結 參考圖中用紅色虛線指引的紅色框是**鉤子函式**
在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式，然後我們再一一詳解:
------
--- 函式名 -------
狀態description
1beforecreate
更新完成狀態
元件例項剛剛被建立，元件屬性計算之前，如data屬性等
2created
建立完畢狀態
元件例項建立完成，屬性已繫結，但dom還未生成，$el屬性還不存在
3beforemount
掛載前狀態
模板編譯掛載之前
4mounted
掛載結束狀態
模板編譯掛載之後（不保證元件已在document中）
5beforeupdate
更新前狀態
元件更新之前
6updated
更新完成狀態
元件更新之後
6.1activated
更新完成狀態
for keep-alive，元件被啟用時呼叫
6.2deactivated
更新完成狀態
for keep-alive，元件被移除時呼叫
7beforedestroy
銷毀前狀態
元件銷毀前呼叫
8destroyed
銷毀完成狀態
元件銷毀後呼叫
我們將上圖按照從上到下依次分為幾個部分進行解析
在這個生命週期之間，進行初始化事件，進行資料的觀測，可以看到在created的時候資料已經和data屬性進行繫結（放在data中的屬性當值發生改變的同時，檢視也會改變）。 注意看下：此時還是沒有el選項
在這一階段首先會判斷物件是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命週期，直到在該vue例項上呼叫vm.$mount(el)。
vm.$mount(el) /*這個el引數就是掛在的dom接點*/（1）yes -如果vue例項物件中有template引數選項，則將其作為模板編譯成render函式。
（2）no -如果沒有template選項，則將外部html作為模板編譯。
（3）可以看到template中的模板優先順序要高於outer html的優先順序。
那麼將vue物件中template的選項注釋掉後列印如下資訊：
這下就可以想想為什麼el的判斷要在template之前了~是因為vue需要通過el找到對應的outer template。
在vue物件中還有乙個render函式，它是以createelement作為引數，然後做渲染操作，而且我們可以直接嵌入jsx.
new vue(
})
所以綜合排名優先順序：render函式選項 > template選項 > outer html.
beforemount時el還是 }，這裡就是應用的 virtual dom（虛擬dom） 此時是給vue例項物件新增$el成員，並且替換掉掛在的dom元素。因為在之前console中列印的結果可以看到beforemount之前el上還是undefined。
在mounted之後可以看到掛載的內容發生了變化
當vue發現data中的資料發生了改變，會觸發對應元件的重新渲染，先後呼叫beforeupdate和updated鉤子函式。
beforedestroy鉤子函式在例項銷毀之前呼叫。在這一步，例項仍然完全可用。 destroyed鉤子函式在vue 例項銷毀後呼叫。呼叫後，vue 例項指示的所有東西都會解繫結，所有的事件***會被移除，所有的子例項也會被銷毀。
一開始以為鉤子就是為了檢視生命週期用的 後來想想我太天真了
Vue入門（六） Vue的生命週期
vue的生命週期有什麼用呢？vue的生命週期是為了讓我們可以在元件從建立到銷毀之間新增一些功能，以便更好地控制項，在乙個元件整個的建立銷毀之間劃分的不同階段，每個都有與這個階段相對應的鉤子函式，通過在鉤子函式內寫入方法，實現對不同階段元件的控制。生命週期階段一 beforecreate，表示在例項被...
vue生命週期
beforecreate 元件例項剛剛被建立，屬性都沒有 create 例項已經建立完成，屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...
vue生命週期
vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段，每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期，能幫助我們理解vue例項的運作機制，更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後，此時的資料...