摘要：上篇文章介紹了構(gòu)造函數(shù)的部分實(shí)現(xiàn)，當(dāng)前實(shí)例不是組件時(shí)，會(huì)執(zhí)行方法。這個(gè)文件就是對(duì)構(gòu)造函數(shù)進(jìn)行的第一層包裝了。但是注意這里的代碼我們構(gòu)造函數(shù)的第二層包裝，就在這個(gè)文件里了?；氐降脑创a中，當(dāng)不存在時(shí)，直接返回基礎(chǔ)構(gòu)造器的。

上篇文章介紹了Vue構(gòu)造函數(shù)的部分實(shí)現(xiàn)，當(dāng)前Vue實(shí)例不是組件時(shí)，會(huì)執(zhí)行mergeOptions方法。

vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
    options || {},
    vm
)

mergeOptions方法，我們之后的博文再來(lái)做詳細(xì)介紹。今天主要研究resolveConstructorOptions方法,從字面意思來(lái)看，這個(gè)方法是來(lái)解析constructor上的options屬性的。我們來(lái)看源碼。

export function resolveConstructorOptions (Ctor: Class) {
  let options = Ctor.options
  // 有super屬性，說(shuō)明Ctor是Vue.extend構(gòu)建的子類(lèi)
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions // Vue構(gòu)造函數(shù)上的options,如directives,filters,....
    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) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

這個(gè)方法要分成兩種情況來(lái)說(shuō)明，第一種是Ctor是基礎(chǔ)Vue構(gòu)造器的情況，另一種是Ctor是通過(guò)Vue.extend方法擴(kuò)展的情況。

當(dāng)Ctor(Ctor其實(shí)就是構(gòu)造函數(shù))是基礎(chǔ)Vue構(gòu)造器時(shí)，比如是通過(guò)new關(guān)鍵字新建Vue構(gòu)造函數(shù)的實(shí)例

const vm = new Vue({
  el: "#app",
    data: {
      message: "Hello Chris"
    }
})

這個(gè)時(shí)候options就是Vue構(gòu)造函數(shù)上的options。如下圖

那么這個(gè)options是在哪里定義的呢？在之前的代碼中好像沒(méi)有看到options的定義在哪里？此時(shí)我們應(yīng)該怎么去找這個(gè)options定義的地方呢？
這里教大家一個(gè)方法，首先找到package.json，在這里可以找到我們平時(shí)用到的一些npm腳本。以npm run dev為例。實(shí)際上npm run dev是執(zhí)行了下列的命令
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
rollup是類(lèi)似于webpack的打包工具。我們可以看到這條命令指向了一個(gè)地址scripts/config，之后還指定了一個(gè)Target。找到script/config,發(fā)現(xiàn)這個(gè)文件里
有TARGET為web-full-dev的配置。

// Runtime+compiler development build (Browser)
  "web-full-dev": {
    entry: resolve("web/entry-runtime-with-compiler.js"),
    dest: resolve("dist/vue.js"),
    format: "umd",
    env: "development",
    alias: { he: "./entity-decoder" },
    banner
  }

來(lái)分析上面的代碼，入口文件的地址在web/entry-runtime-with-compiler.js。這個(gè)文件就是對(duì)Vue構(gòu)造函數(shù)進(jìn)行的第一層包裝了。由于今天分析的是options相關(guān)的內(nèi)容，而這層包裝里沒(méi)有options相關(guān)的內(nèi)容，所以這個(gè)文件我們不展開(kāi)講(之后有文章會(huì)詳細(xì)介紹)。但是注意這里的代碼

...
import Vue from "./runtime/index"
...

我們Vue構(gòu)造函數(shù)的第二層包裝，就在這個(gè)文件里了。忽略其他的代碼，我們來(lái)看關(guān)于Vue.options的部分

...
import Vue from "core/index" // 第三層包裝
import platformDirectives from "./directives/index"
import platformComponents from "./components/index"
...
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
...

// platformDirectives相關(guān)
// 這里導(dǎo)出Vue全局指令model,show
import model from "./model"
import show from "./show"
export default {
  model,
  show
}

// platformComponents相關(guān)
// 這里導(dǎo)出Vue全局組件Transition，TransitionGroup
import Transition from "./transition"
import TransitionGroup from "./transition-group"
export default {
  Transition,
  TransitionGroup
}

上面的代碼主要是給Vue.options.directives添加model,show屬性，給Vue.options.components添加Transition,TransitionGroup屬性。那么還有filters，_base屬性，以及components中的KeepAlive又是怎么來(lái)的呢？
這就要看Vue的第三層包裝里都做了些什么？找到core/index,同樣我們只看Vue.options相關(guān)代碼。

mport Vue from "./instance/index"
import { initGlobalAPI } from "./global-api/index"
...
initGlobalAPI(Vue)
...

instance/index 就是我們第二篇文章——構(gòu)造函數(shù)定義的那個(gè)文件。這個(gè)文件我們之前看過(guò)，沒(méi)有和Vue構(gòu)造函數(shù)options相關(guān)的代碼。那么我們剩下的沒(méi)有配置的options一定是在initGlobalAPI上配置了。接來(lái)下看看/global-api/index的代碼。

/* @flow */

import { ASSET_TYPES } from "shared/constants"
...
export function initGlobalAPI (Vue: GlobalAPI) {
  ...
  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + "s"] = Object.create(null)
  })
  Vue.options._base = Vue
  extend(Vue.options.components, builtInComponents)
  ...
}

// shared/constants.js
export const ASSET_TYPES = [
  "component",
  "directive",
  "filter"
]

// core/components/index
import KeepAlive from "./keep-alive"
export default {
  KeepAlive
}

上面這層包裝就把filters,_base和components中的KeepAlive都實(shí)現(xiàn)了。通過(guò)這三層包裝，Vue構(gòu)造函數(shù)的options對(duì)象就生成了，看這些文字可能有點(diǎn)繞，我們直接上圖。

回到resolveConstructorOptions的源碼中，當(dāng)Ctor.super不存在時(shí)，直接返回基礎(chǔ)構(gòu)造器的options。即上圖經(jīng)過(guò)兩次包裝的options。那么Ctor.super是什么呢？
Ctor.super是通過(guò)Vue.extend構(gòu)造子類(lèi)的時(shí)候。Vue.extend方法會(huì)為Ctor添加一個(gè)super屬性，指向其父類(lèi)構(gòu)造器

Vue.extend = function (extendOptions: Object): Function {
  ...
  Sub["super"] = Super
  ...
}

所以當(dāng)Ctor時(shí)基礎(chǔ)構(gòu)造器的時(shí)候，resolveConstructorOptions方法返回基礎(chǔ)構(gòu)造器的options。除了Ctor是基礎(chǔ)構(gòu)造器之外，還有一種是Ctor是通過(guò)Vue.extend構(gòu)造的子類(lèi)。這種情況比較復(fù)雜，下一篇文章專(zhuān)門(mén)對(duì)其進(jìn)行介紹，敬請(qǐng)期待！