vue源碼解析之生命周期原理


 

生命周期

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

state系列

  1. props原理
  2. methods原理
  3. data原理
  4. computed原理
  5. watch原理

lifecycle系列

  1. 生命周期原理

event系列

  1. event原理

render系列

  1. render原理

inject/provide系列

  1. inject/provide原理

plugins系列

  1. vue-router原理
  2. Vue Router 那些事
  3. Vuex你應該知道的事
  4. vue源碼解析之vuex原理
  5. Vue自定義插件

組件系列

  1. keep-alive原理
  2. Vue 單文件組件
  3. Vue組件間通信
  4. vue虛擬列表

指令系列

  1. Vue自定義指令
  2. vue源碼解析之Directives原理

算法系列

  1. diff原理
  2. Vue編譯器源碼分析

異步任務

  1. vue源碼解析之NextTick原理

其他

  1. vue單元測試
  2. Vue輪播組件
  3. 你不知道的vue那些事
  4. vue技巧大解密
  5. 面試-高級前端之VUE數據響應式實現


免責聲明!

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



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