前面探讨了一大堆,似乎都和如何使用VueJS没有直接关系,但是通过学习发布说明和guild构建的过程,还是对深入理解VueJS有好处的。
下面就该进入到源码的细节学习了。
打开 'src' 目录,下面的文件结构比较清晰,很显然我们先要去看看 'core' 下面的代码。
首先就是 'src/core/index.js' 了,这里面代码非常的简短。
- 第一步就是import Vue的构造器定义(其实并不是原始Vue构造器,也是经过包装过的)
- 其次就是给Vue构造器初始化 Global API
- 再然后就是给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<string>;
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<string>;
_lifecycleHooks: Array<string>;
_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