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
實例被銷毀 跟實例有關的監聽等都會銷毀