1. 程式人生 > 其它 >vue原始碼解析之生命週期原理

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資料響應式實現