vue父子組件及mixin生命周期執(zhí)行順序

vue生命周期
image

總共分為8個階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后。

  • 創(chuàng)建前/后: 在beforeCreated階段,vue實例的掛載元素$el和數(shù)據(jù)對象Data都為undefined,還未初始化。created階段,vue實例的數(shù)據(jù)對象data有了,el還沒有

  • 載入前/后:在beforeMount階段,vue實例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點,data.message還未替換。在mounted階段,vue實例掛載完成,data.message成功渲染。

  • 更新前/后:當data變化時,會觸發(fā)beforeUpdate和updated方法。

  • 銷毀前/后:在執(zhí)行destroy方法后,對data的改變不會再觸發(fā)周期函數(shù),說明此時vue實例已經解除了事件監(jiān)聽以及和dom的綁定,但是dom結構依然存在。

activated: keep-alive組件激活時調用

deactivated: keep-alive組件銷毀時調用

errorCaptured: 當捕獲一個來自子孫組件的錯誤時被調用


<keep-alive></keep-alive> 包裹動態(tài)組件時,會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染。

父子組件生命周期執(zhí)行順序

創(chuàng)建與掛載

父beforeCreate > 父created > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > 父mounted

更新

父beforeUpdate > 子beforeUpdate > 子updated > 父updated

銷毀

父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

父子組件及mixin的生命周期執(zhí)行順序

mixin的生命周期鉤子在組件的生命周期鉤子之前執(zhí)行

在父組件中引入了mixin,生命周期順序如下:

mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的befo

作者:一條小魯班
鏈接:http://www.itdecent.cn/p/f0b7950b3ab0
來源:簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容