vue原始碼解析之生命週期原理
阿新 • • 發佈:2021-10-21
生命週期
beforeCreate:最初呼叫觸發,data和events都不能用。可以在這裡處理整個系統載入的Loading;
created:已經具有響應式的data,可以傳送events。可以在這裡去傳送請求。
beforeMount:在模板編譯後,渲染之前觸發。SSR中不可用。基本用不上整個Hook。
mounted:在渲染之後觸發,並可以訪問元件中的DOM以及$ref,SSR中不可用。
beforeUpdate:在資料改變後,模板改變前觸發。切勿使用它監聽資料變化(使用計算屬性和watch監聽)。
updated:在資料改變後、模板改變後觸發。常用於渲染後的打點、效能檢測或者觸發vue元件中非vue元件的更新。
beforeDestroy:元件解除安裝前觸發,可以在此時清理事件、計時器或者取消訂閱操作。
destroyed:解除安裝完畢後觸發,可以做最後的打點或事件觸發操作。
原始碼分析
initLifecycle
在vue初始化的時候會執行initLifecycle
initLifecycle會在beforeCreated鉤子觸發前呼叫,標誌位在該方法中初始化為false,在對應的鉤子函式觸發後更新為true
callHook
這個方法用於執行鉤子函式
拿到註冊的鉤子函式,遍歷執行,因為一個例項通過mixins可能有很多個相同鉤子,所以合併為陣列
鉤子函式觸發時機
beforeCreate created
beforeMount mounted
initMixin方法中呼叫了vm.$mount,$mount中呼叫了mountComponent
beforeUpdate updated
activated deactivated
beforeDestory destoryed
vue系列課程
最近會陸續的對vue進行原始碼分析,一系列課程如下: