生命周期
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進行源碼分析,一系列課程如下: