對vue官網生命周期、實際項目中vue執行順序的理解


vue實際項目中會遇到很多對於畫面顯示及各個部分配合的順序問題,后來發現是對vue生命周期沒有理解透徹,現將vue生命周期簡潔版理解記錄如下:

我們都知道,vue的生命周期鈎子函數有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

那么這些鈎子函數在實際項目中怎么是什么時間調用的呢?可以結合官網的vue實例模塊去理解

一、

new vue()

此時實例化對象 、初始化事件和生命周期。

二、

beforeCreate

在初始化之后 也就是說、此時我們還無發的到 data、computed、methods、watch的值、一般用於非響應式初始化使用、

接下來就是我們的computed計算屬性 在beforeCreate 與 Created之間調用、

三、

created

此時實例創建完成 在此時我們可以得到計算屬性以及data等數據、因此我們做頁面初始化時候 init方法一般都在created鈎子中調用、

但是此時沒有掛在到dom上不能訪問$el 和$ref屬性 ,此時調用$el會打印出undefined ,調用$ref會打印出空數組

接下來要判斷有沒有el如果沒有的話生命周期停止,如果有el會去判斷有沒有template模版、如果有就會將template模版編譯成render函數,如果沒有就會把外部的HTML編譯

四、

beforeMount

此時是掛載dom之前,我們已經找到了對應的template,此時$ref上有數據但是還沒有在頁面中顯示,因此此時我們頁面上的{{ }}還是沒有被替換掉。

五、

Mounted

此時實例已經掛載dom 可以通過dom訪問dom節點 $ref可以訪問到屬性

六、

beforeUpdate

此鈎子函數是我們的組件更新之前調用 、數據已經發生改變 但是頁面還沒有變化、

適合在組件更新前訪問已有的dom   可以在這個時點 添加畫面項目等監聽

七、

updated

此時組件dom已經更新完成 、頁面已經發生改變、可執行依賴dom的操作了

八、

beforeDestroy

在實例銷毀之前我們仍可以使用之前存在的實例

九、

destroyed

實例被銷毀  跟實例有關的監聽等都會銷毀

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM