淺析Vue源碼（二）—— initMixin(上)

在上一篇文章《淺析Vue源碼（一）-- 造物創世》中提到在定義了一個 Vue Class的時候會引入initMixin 來初始化一些功能，這篇文章就來說講initMixin到底初始化了哪些原理呢？

initMixin來源init.js

let uid = 0

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
    // 若是是Vue的實例，則不須要被observe
    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    // 第一步： options參數的處理
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      // mergeOptions接下來咱們會詳細講哦~
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    // 第二步： renderProxy
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // 第三步： vm的生命週期相關變量初始化
    initLifecycle(vm)
    
    // 第四步： vm的事件監聽初始化
    initEvents(vm)
    // 第五步： vm的編譯render初始化
    initRender(vm)
    // 第六步： vm的beforeCreate生命鉤子的回調
    callHook(vm, 'beforeCreate')
    // 第七步： vm在data/props初始化以前要進行綁定
    initInjections(vm) // resolve injections before data/props
    
    // 第八步： vm的sate狀態初始化
    initState(vm)
    // 第九步： vm在data/props以後要進行提供
    initProvide(vm) // resolve provide after data/props
    // 第十步： vm的created生命鉤子的回調
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 第十一步：render & mount
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}
複製代碼

從上面一點一點註釋能夠看出，主要是爲咱們的Vue原型上定義一個方法_init。而後當咱們執行new Vue(options) 的時候，會調用這個方法。而這個_init方法的實現，即是咱們須要關注的地方。 前面定義vm實例都挺好理解的，主要咱們來看一下mergeOptions這個方法，其實Vue在實例化的過程當中，會在代碼運行後增長不少新的東西進去。咱們把咱們傳入的這個對象叫options，實例中咱們能夠經過vm.$options訪問到。

mergeOptions

mergeOptions主要分紅兩塊，就是resolveConstructorOptions(vm.constructor)和options，mergeOptions這個函數的功能就是要把這兩個合在一塊兒。options是咱們經過new Vue(options)實例化傳入的，因此，咱們主要須要研究的是resolveConstructorOptions這個函數的功能。

resolveConstructorOptions 處理 options

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  // 首先須要判斷該類是不是Vue的子類
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    // 來判斷父類中的options 有沒有發生變化
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        // 當爲Vue混入一些options時，superOptions會發生變化，此時於以前子類中存儲的cachedSuperOptions已經不相等，因此下面的操做主要就是更新sub.superOptions
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}
複製代碼

在這裏咱們大概會產生一個疑惑，可能不太清楚Ctor類裏面每一個屬性到底表明了什麼？ 下面咱們來看這一段代碼：

Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )
  Sub['super'] = Super
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)
複製代碼

繼承自Super 的子類Sub。換句話說，Ctor實際上是繼承了Vue，是Vue的子類。 那又有一個疑惑了，mergeOptions是什麼呢？

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  //...

  // 統一props格式
  normalizeProps(child)
  // 統一directives的格式
  normalizeDirectives(child)

  // 若是存在child.extends
  // ...
  // 若是存在child.mixins
  // ...

  // 針對不一樣的鍵值，採用不一樣的merge策略
  const options = {}
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}
複製代碼

上面採起了對不一樣的field採起不一樣的策略，Vue提供了一個strats對象，其自己就是一個hook,若是strats有提供特殊的邏輯，就走strats,不然走默認merge邏輯。

const strats = config.optionMergeStrategies
strats.el  = strats.propsData = ...
strats.data = ...
strats.watch  ...
....

const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined
    ? parentVal
    : childVal
}
複製代碼

看到這裏，咱們終於把業務邏輯以及組件的一些特性全都放到了vm.options拿到可用的信息。框架基本上都是對輸入寬鬆，對輸出嚴格，vue也是如此，無論使用者添加了什麼代碼，最後都規範的收入vm.$options中。

renderProxy

這一步比較簡單，主要是定義了vm._renderProxy,這是後期爲render作準備的，做用是在render中將this指向vm._renderProxy。通常而言，vm._renderProxy是等於vm的，但在開發環境，Vue動用了Proxy這個新API，有關Proxy，你們能夠讀讀深刻淺出ES6（十二）：代理 Proxies, 這裏再也不展開。

github喜歡的話能夠給我一個star哦~ 接下來會涉及到如下解析哦

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm)
initProvide(vm)
callHook(vm, 'created')
複製代碼