vue作為如今前端開發主流框架（其中還有angular和react）之一，不僅深受廣大前端工程師的喜愛，也成為了很多人想要入門前端的首選框架。究其緣由，還是因為其相對於另外兩個框架開發更加簡單，上手更加容易。 最近，我也開始接觸一些前端知識，對vue框架有一點了解，那今天就談一談對vue例項生命週期的理解。
首先，我們必須清楚什麼叫例項生命週期。顧名思義，例項生命週期是指乙個vue例項從被建立到銷毀的整個過程，其中包括一系列初始化、編譯模板、瀏覽器頁面顯示等操作過程，同時在這些過程中存在一些生命週期鉤子的函式，在每個函式執行前後資料都會發生一定的變化。這些函式分為四組：分別為beforecreate/created、beforemount/mount、beforeupdate/updated、beforedestroy/destroyed.下面將從這四組函式來窺探例項的生命週期過程。
1.beforecreate/created
一開始我們通過new vue（{}）建立乙個vue例項，在執行到beforecreate函式時，該vue例項只是乙個空例項，只存在一些預設的事件，即例項的data、methods等屬性方法還沒有初始化。當執行到created函式時，該例項已經進行了初始化過程，因此在該鉤子函式中我們可以對例項屬性和方法進行呼叫，而這也是程式最早能夠呼叫例項相關屬性和方法的階段。
2.beforemount/mount
在例項初始化後，vue開始進行模板編譯，把**中那些指令編譯成模板字串最終放在記憶體中，然後再將模板字串渲染成記憶體中的dom。在執行到beforemount函式時，表示模板已經編譯完成，但還僅僅存在於記憶體中，並沒有顯示到頁面中去，此時瀏覽器頁面還保持原樣；當執行到mount函式時，編譯模板才掛載到了頁面上，此時也是最早操作dom節點階段。至此，vue例項初始化完畢，元件也從建立階段進入到了執行階段。
3.beforeupdate/updated
在元件的執行階段，這兩個生命週期函式一直伴隨在資料的更新過程中。在執行到beforeupdate函式時，此時data資料已經完成更新，但頁面資料還保持原樣，並沒有發生任何改變，頁面與data沒有同步。之後根據最新的data資料重新渲染成乙份最新的記憶體dom樹，這時把最新dom樹渲染到頁面中，當執行到updated函式時，頁面資料也完成了更新，與data資料完成了同步。
4.beforedestroy/destroyed
當執行到beforedestroy函式時，此時例項開始從執行階段進入到銷毀階段，但例項具有的所有資料data、方法methods以及過濾器等還處於可用狀態，並沒有執行真正銷毀過程；當執行到destroyed函式時，例項已經完全銷毀，其具有的資料、方法等已不能使用。
vue例項生命週期
每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽 編譯模板 掛載例項到 dom 在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的 beforecreate 在例項初始化之後，資料觀測和事件配...
Vue例項生命週期
vue例項在建立時有一系列的初始化步驟，例如建立資料觀察，編譯模板，建立資料繫結等。在此過程中，我們可以通過一些定義好的生命週期鉤子函式來執行業務邏輯。本文將詳細介紹vue例項的生命週期 下圖是vue例項生命週期的圖示 接下來，根據提供的生命週期鉤子，對vue例項各個階段的情況進行詳細說明 befo...
vue生命週期理解
關於vue面試，最常問到的就是vue的生命週期，也看過很多關於如何回答過這個問題的解答，自己也有所總結，就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式，分別是 activated與deacti...