VueJS学习之旅 04

前面探讨了一大堆，似乎都和如何使用VueJS没有直接关系，但是通过学习发布说明和guild构建的过程，还是对深入理解VueJS有好处的。
下面就该进入到源码的细节学习了。

---

打开 'src' 目录，下面的文件结构比较清晰，很显然我们先要去看看 'core' 下面的代码。
首先就是 'src/core/index.js' 了，这里面代码非常的简短。

1. 第一步就是import Vue的构造器定义（其实并不是原始Vue构造器，也是经过包装过的）
2. 其次就是给Vue构造器初始化 Global API
3. 再然后就是给Vue的原型对象增加一个 '$isServer' 属性，用来标识是否是在server端进行渲染。

针对于上面的第二步，调用 initGlobalAPI 方法来完成。具体参见 'src/core/global-api/index.js' 。

Global Config

首先个Vue增加一个属性 'config'，其中包含了VueJS的全局配置（对应API文档中的 Global Config）。
该值不可重新赋值，不可以调用Vue.config = XXX;；但可以设置其内部具体的配置项，如 Vue.config.silent = true;。
这些配置选项的默认值来源于 'src/core/config.js'。

具体来看看， 以下是对Vue.config对象的类型约束

export type Config = {
  // user
  optionMergeStrategies: { [key: string]: Function };
  silent: boolean;
  devtools: boolean;
  errorHandler: ?Function;
  ignoredElements: Array;
  keyCodes: { [key: string]: number };
  // platform
  isReservedTag: (x?: string) => boolean;
  parsePlatformTagName: (x: string) => string;
  isUnknownElement: (x?: string) => boolean;
  getTagNamespace: (x?: string) => string | void;
  mustUseProp: (tag?: string, x?: string) => boolean;
  // internal
  _assetTypes: Array;
  _lifecycleHooks: Array;
  _maxUpdateCount: number;
}

• 其中可以看到前6项是user级别，即可以在Vue启动之前修改它们。详细请参照官方API文档。
• 中间的5项是platform级别，目前没有研究。
• 后3项是internal级别，应该是Vue内部使用的设置。

下面这段代码则是对 Global Config 初始值的设置

const config: Config = {
  /**
   * Option merge strategies (used in core/util/options)
   */
  optionMergeStrategies: Object.create(null),

  /**
   * Whether to suppress warnings.
   */
  silent: false,

  /**
   * Whether to enable devtools
   */
  devtools: process.env.NODE_ENV !== 'production',

  /**
   * Error handler for watcher errors
   */
  errorHandler: null,

  /**
   * Ignore certain custom elements
   */
  ignoredElements: [],

  /**
   * Custom user key aliases for v-on
   */
  keyCodes: Object.create(null),
  ...
}

• Vue.config.optionMergeStrategies 默认值：{}
• Vue.config.silent 默认值：false
• Vue.config.devtools 默认值：true (生产版为 false)
• Vue.config.errorHandler 默认值：null
• Vue.config.ignoredElements 默认值：[]
• Vue.config.keyCodes 默认值：{}

Global API

import config from '../config'
import * as util from '../util/index'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
...
Vue.util = util
Vue.set = set
Vue.delete = del
Vue.nextTick = util.nextTick
...
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)

• 可以看到Vue.util包含了一系列的通用工具类组件，但是并没有在官方的API文档中给出，猜测应该是在VueJS开发内部使用而不建议用户使用。（臆测，有待考证）
• 语句 Vue.set = set 给Vue增加了 Vue.set 全局API。
• 语句 Vue.delete = del 给Vue增加了 Vue.delete 全局API。
• 语句 Vue.nextTick = util.nextTick 给Vue增加了 Vue.nextTick 全局API。
• 语句 initUse(Vue) 给Vue增加了 Vue.use 全局API。
• 语句 initMixin(Vue) 给Vue增加了 Vue.mixin 全局API。
• 语句 initExtend(Vue) 给Vue增加了 Vue.extend 全局API。
• 语句 initAssetRegisters(Vue) 给Vue增加了 Vue.component, Vue.directive, Vue.filter 3个全局API。
• 官网的Global API中还有一个 Vue.compile 则是在 'src/entries/web-runtime-with-compiler.js' 文件中定义的。Vue.compile = compileToFunctions。

Vue.options

文件中还有部分代码，则是初始化了Vue.options

Vue.options = Object.create(null)
config._assetTypes.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
})

// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue

util.extend(Vue.options.components, builtInComponents)

以上代码中，为Vue初始化了以下optpions

• Vue.options.components
• Vue.options.components.KeepAlive
• Vue.options.directives
• Vue.options.filters
• Vue.options._base