Vue中的生命週期函數詳解

首先對Vue實例進行初始化,在初始化階段,對象身上只有一些生命週期函數和默認的事件,其他的東西還都未創建。beforeCreate表示在初始化之前,執行beforeCreate函數時,data和methods中的數據還都沒有被初始化。當created函數執行的時候,data和created都已經被初始化完畢,如果要調用methods中的方法和data中的數據,最早只能在created函數中操作

接下來,將開始進行Vue的模板編譯,最終將會在內存中生成一個編譯好的最終模板字符串,然後把這個模板字符串渲染爲內存中的DOM,此時,只是在內存中渲染好了模板,並沒有掛載到頁面中去。當執行beforeMount函數時,表示模板已經在內存中渲染好了,但是並沒有真正的掛載到頁面中去,此時頁面還是舊的。然後將內存中編譯好的模板,真實的替換到瀏覽器的頁面中去,接下來將會執行mounted函數,只要執行了mounted函數,就表示整個Vue實例初始化完畢了,此時組件已經脫離了創建階段,進入了運行階段。

在運行階段,只有兩個生命週期函數,beforeUpdate和updated這兩個事件會根據data數據的改變,有選擇性的執行0次到多次。當執行beforeUpdate函數的時候,頁面中顯示的數據還是舊的。此時data裏的數據已經更新完畢,但是頁面尚未和最新的數據保持同步。執行完beforedUpdate後,會根據data中得到數據,在內存中重新渲染出一份最新的內存DOM樹,當最新的內存DOM樹被更新之後,會把最新的內存DOM樹重新渲染到真實的頁面中去,這時候數據從data(model層)->view(視圖層)的更新。當updated事件執行的時候,頁面和data數據已經保持同步了,都是最新的。

當執行boforeDestory鉤子函數的時候,Vue實例就已經從運行階段進入到了銷燬階段;當執行beforeDestory的時候,實例身上所有的data和所有的methods以及過濾器、指令等,都處於可用狀態,此時還沒有真正執行銷燬過程。當執行destoryed函數的時候,組件已經被完全銷燬了,此時,組件中的所有數據、方法、過濾器、指令等,都已經不可用了。此時Vue實例的生命週期已經全部結束。

發佈了63 篇原創文章 · 獲贊 50 · 訪問量 9726
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章