前面探討了一大堆,似乎都和如何使用VueJS沒有直接關(guān)系,但是通過學習發(fā)布說明和guild構(gòu)建的過程创葡,還是對深入理解VueJS有好處的。
下面就該進入到源碼的細節(jié)學習了绢慢。
打開 'src' 目錄蹈丸,下面的文件結(jié)構(gòu)比較清晰,很顯然我們先要去看看 'core' 下面的代碼呐芥。
首先就是 'src/core/index.js' 了逻杖,這里面代碼非常的簡短。
- 第一步就是import Vue的構(gòu)造器定義(其實并不是原始Vue構(gòu)造器思瘟,也是經(jīng)過包裝過的)
- 其次就是給Vue構(gòu)造器初始化 Global API
- 再然后就是給Vue的原型對象增加一個 '$isServer' 屬性荸百,用來標識是否是在server端進行渲染。
針對于上面的第二步滨攻,調(diào)用 initGlobalAPI 方法來完成够话。具體參見 'src/core/global-api/index.js' 。
Global Config
首先個Vue增加一個屬性 'config'光绕,其中包含了VueJS的全局配置(對應(yīng)API文檔中的 Global Config)女嘲。
該值不可重新賦值,不可以調(diào)用Vue.config = XXX;
诞帐;但可以設(shè)置其內(nèi)部具體的配置項欣尼,如 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級別磺送,應(yīng)該是Vue內(nèi)部使用的設(shè)置。
下面這段代碼則是對 Global Config 初始值的設(shè)置
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 (生產(chǎn)版為 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文檔中給出估灿,猜測應(yīng)該是在VueJS開發(fā)內(nèi)部使用而不建議用戶使用。(臆測脾歧,有待考證)
- 語句
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大溜。- 官網(wǎng)的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