vue的生命週期有什麼用呢？
vue的生命週期是為了讓我們可以在元件從建立到銷毀之間新增一些功能，以便更好地控制項，在乙個元件整個的建立銷毀之間劃分的不同階段，每個都有與這個階段相對應的鉤子函式，通過在鉤子函式內寫入方法，實現對不同階段元件的控制。
生命週期階段一：beforecreate，表示在例項被建立之前的函式，由於這個階段不存在任何的資料和dom以及vdom結構，所以我們一般不對這個階段進行操作。
生命週期階段二：created，這個階段我們初始化例項的事件和生命週期，這裡得到乙個例項被建立之後的函式，我們可以在這個階段對data資料進行一些準備，如計算和轉換，以及傳送請求寫入資料，等待被渲染。
生命週期階段三：beforemount，在這個階段，我們的元件有很多事情要做，因為在這個階段結束時，我們將會得到vdom，所以我們需要判斷options內『el』是否存在，『template』是否存在，這個階段內建乙個render函式，將jsx轉化為 vdom，以便在渲染和更變的時候為diff演算法做比對。因為這個階段本來要做的事情就很多了，我們就不再在這個階段操作了。
vdom，虛擬 dom，是乙個js物件，內建屬性 tag，props，children，可以代替真實dom進行一系列的更變，然後再在必要的時候渲染，提高效能
diff演算法，差異演算法，將新舊兩個將被被渲染的 dom 樹（js物件）進行差異比較，得到的差異就是我們真正需要對 dom 結構的操作，可以實現資料更新時的修改而不是整體重新渲染，且符合 vue 的 mvvm 思想。
但是，在改動項和原本的資料改動不大結構仍類似的時候會出現誤判渲染，所以我們為類似的渲染結構加上鍵值，在避免誤判的同時可以提高diff的效率。
鍵值的作用：因為diff演算法的差異比較是同級比較，所以加入鍵值不同鍵值不在同層無法比較，進而避免誤判和減少不必要的比較。
生命週期階段四：mounted，這個階段，是dom真實被渲染出來的階段，渲染好的 html 替換vueoptions內的 『el』 屬性指向的 vdom（root），或是替換對應 html 的內容（component）。由於dom被渲染出來了，這個階段我們甚至可以取到元素，所以我們可以在這個階段例項化第三方外掛程式的建構函式，因為這個階段第三方外掛程式的dom已經被渲染出來可以被例項化的函式進行dom操作了。
第三方外掛程式，典型例子swiper。
生命週期階段五：beforedestroy，元件銷毀階段，和第六階段 destroy 基本一樣，並沒有太大的區別，這個階段我們需要做的事情一般是善後，關閉一些自己開的東西，比如定時器等，這種自己在其他階段開啟的方法，vue是不會幫我們擦屁股的，所以我們在這個階段需要自己關閉一些自己的方法。這個階段的銷毀分為內部銷毀和外部銷毀，兩者區別在於，內部銷毀不會刪除原本渲染的 html dom 結構，這個時候就需要我們在這個階段手動獲取元素刪除，而外部刪除則不會有這個後遺症。
生命週期階段六：destroyed，這個階段表示銷毀後，實際狀態和作用與階段五並沒有太大的區別，所以不多贅述。
以上就是自動的生命週期從建立到銷毀，本來不出意外就這樣了，但是人生怎麼會不出意外呢，所以下述的幾種生命週期大概就是跟恩愛夫妻的孩子一樣的「意外」。
資料更新帶來的生命週期：beforeupdate和updated。
beforeupdate：這個階段在資料更新時呼叫，但是又在vdom補丁之前，在這裡我們適合訪問原 dom，對其進行操作，但我們多不在此進行其他的操作。
updated：在這個階段vdom已經打好補丁，所以我們可以在這裡執行依賴於dom的操作，事實上，在改動資料的第三方外掛程式的建構函式例項化也可以在這個地方進行，但是由於，這個階段會隨著每次的資料的更改觸發，而例項化只需要一次，所以，我們在這個階段實現第三階段的例項化應該加個單例模式進行判斷攔截。或者我們可以資料更新需要的例項化放在created階段新增資料請求之後，當然這個階段由於dom尚未被渲染，所以我們需要一點點小手段，this.$nexttick。
nexttick，在這個方法內的函式會在dom真是渲染後才執行，所以相較於updated更加推薦這個方法。
只存在於keep-alive元件的「activated」以及「deactivated」，兩個週期階段，乙個表示前台顯示狀態，乙個表示後台快取階段， keep-alive 元件可以通過呼叫後台快取實現提高切換效率的（它們鉤子函式基本不用）。
VUE入門02 vue生命週期
網上有一些哥們分享的面試題有關於vue生命週期的 官方給出下面的圖來進行解釋，不過直接看還是不太明白，以下記錄是自己的理解和其他人的經驗總結 參考 圖中用紅色虛線指引的紅色框是 鉤子函式 在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作,那麼先列出所有的鉤子函式...
vue生命週期
beforecreate 元件例項剛剛被建立，屬性都沒有 create 例項已經建立完成，屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...
vue生命週期
vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段，每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期，能幫助我們理解vue例項的運作機制，更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後，此時的資料...