Vue源碼之組件化/生命週期(我的向)

大體流程

具體流程

組件化

（createComponent）

構造⼦類構造函數

const baseCtor = context.$options._base

// plain options object: turn it into a constructor if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor) }

創立BaseCtor

• Vue.options._base =Vue

  • Vue.extend的做⽤就是構造⼀個Vue的⼦類，它使⽤⼀種⾮常經典的原型繼承的⽅式把⼀個純對 象轉換⼀個繼承於Vue 的構造器Sub 並返回，而後對Sub 這個對象本⾝擴展了⼀些屬性，
    最後返回Sub

實例化Sub，走_init方法

安裝組件鉤⼦函數

//install component management hooks ontothe placeholder node installComponentHooks(data)

• 把componentVNodeHooks的鉤⼦函數合併到 data.hook中。
• 使用mergeHook函數作鉤子合併

實例化 vnode

new VNode

• 組件的Patch(同步數據驅動部分)=》_init

  if (vm.$options.el) { vm.$mount(vm.$options.el) }
  因爲組件初始化的時候是不傳 el 的，所以組件是⾃⼰接管了 $mount 的過程

  • 1.過程當中對於isCompont的判斷,進行$options的合併

  • 2.在生成實例過程當中對Vm._vnode和Vm,_$Vnode（父）的父子關係判斷處理，進行深度遍歷處理。

  • 、最後執⾏、insert(parentElm, vnode.elm, refElm)、完成組件 的 DOM、插⼊，若是組件 patch、過程當中⼜建立了⼦組件，那麼DOM 的插⼊順序是先⼦後⽗。

總結

編寫⼀個組件其實是編寫 ⼀個 JavaScript對象，而後從新走相關的渲染流程，須要注意的是Vue中對配置合併的處理和是否爲組件的判斷處理。此處過於細緻，不作深究

生命週期

CallHook

• Where:src/core/instance/lifecycle
• Do:調⽤某個⽣命週期鉤⼦註冊 的全部回調函數。

beforeCreate & created

_init 中

• Where:src/core/instance/init.js

• Do：beforeCreate和created的鉤⼦調⽤是在initState的前

• initState 的做⽤ 是初始化 props 、 data 、 methods 、 watch 、 computed 等屬性，

beforeMount & mounted

• 1.beforeMount發生在mount，
  2.通過_render和_upate到mounted
• insertedVnodeQueue 的添加順序是先⼦後⽗，因此對於同步渲染的⼦組件⽽⾔， mounted鉤 ⼦函數的執⾏順序也是先⼦後⽗

beforeUpdate & updated

• beforeUpadte是Warcher前進行
• update的執⾏時機是在flushSchedulerQueue 函數調⽤（響應式重要內容）

beforeDestroy & destroyed

• 核心就是$destroy，它會執⾏vm.__patch__(vm._vnode, null)觸發它⼦組件的銷燬 鉤⼦函數，這樣⼀層層的遞歸調⽤，因此destroy鉤⼦函數執⾏順序是先⼦後⽗，和mounted過 程⼀樣。

activated & deactivated

合併配置

this._init(options)

外部調用

• vm.$options = mergeOptions
  將parent和child合併成新對象返回

  • 1.遞歸調用extend和mixins合併到parent
  • 2.遍歷parent調用mergeField
  • 3.，而後再遍歷child，若是key不在perent的⾃⾝屬性上，則調mergeField 。

內部調用（實例化）

• 走vue.extend
  最後通過initInternalComponent只是作了簡單⼀層對象賦值，並不涉及到遞歸、合併策略等復 雜邏輯。
  ---

  總結

• 1.這一篇將組件化大體流程，生命週期和合並配置搞在了一塊兒。有點亂。
• 2.可是說實話。整個組件化，不去細究就能大體感覺到仍是走的基礎的VUE實例化的過程，只是對是否爲組件進行判斷處理。
• 3.生命週期如上，其實就是掛一個個鉤子。

• 4.合併配置，在我看了仍是核心的進行遍歷合併處理，能夠多關注merge的過程 後記 1.這算是第二篇，發現了一個問題。XMind轉MD確實方便，但貌似做爲一個博客，是否是須要添加具體的VUE源碼裏的代碼片斷，更有利於閱讀。也確實讓人便於理解。可是這暫時不在計劃內， 首先沒那麼多精力,其次，這個本就偏我的向，不是講解類的，若是那天，有精力了，再說吧， 2.接下來應該會更新 我以爲最關鍵的響應式的部分了，也是賊耗費經歷的部分。