VueJS學習之旅 04

前面探討了一大堆,似乎都和如何使用VueJS沒有直接關(guān)系,但是通過學習發(fā)布說明和guild構(gòu)建的過程创葡,還是對深入理解VueJS有好處的。
下面就該進入到源碼的細節(jié)學習了绢慢。


打開 'src' 目錄蹈丸,下面的文件結(jié)構(gòu)比較清晰,很顯然我們先要去看看 'core' 下面的代碼呐芥。
首先就是 'src/core/index.js' 了逻杖,這里面代碼非常的簡短。

  1. 第一步就是import Vue的構(gòu)造器定義(其實并不是原始Vue構(gòu)造器思瘟,也是經(jīng)過包裝過的)
  2. 其次就是給Vue構(gòu)造器初始化 Global API
  3. 再然后就是給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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疙赠,一起剝皮案震驚了整個濱河市付材,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌圃阳,老刑警劉巖厌衔,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捍岳,居然都是意外死亡富寿,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門锣夹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來页徐,“玉大人,你說我怎么就攤上這事银萍”溆拢” “怎么了?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵贴唇,是天一觀的道長贰锁。 經(jīng)常有香客問我,道長滤蝠,這世上最難降的妖魔是什么豌熄? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮物咳,結(jié)果婚禮上锣险,老公的妹妹穿的比我還像新娘。我一直安慰自己览闰,他們只是感情好芯肤,可當我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著崖咨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪油吭。 梳的紋絲不亂的頭發(fā)上击蹲,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天署拟,我揣著相機與錄音,去河邊找鬼歌豺。 笑死推穷,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的类咧。 我是一名探鬼主播馒铃,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼痕惋!你這毒婦竟也來了区宇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤值戳,失蹤者是張志新(化名)和其女友劉穎萧锉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體述寡,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡柿隙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲫凶。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片禀崖。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诈火,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布掸屡,位于F島的核電站,受9級特大地震影響然评,放射性物質(zhì)發(fā)生泄漏仅财。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一碗淌、第九天 我趴在偏房一處隱蔽的房頂上張望盏求。 院中可真熱鬧,春花似錦亿眠、人聲如沸碎罚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荆烈。三九已至,卻和暖如春竟趾,著一層夾襖步出監(jiān)牢的瞬間憔购,已是汗流浹背宫峦。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倦始,地道東北人。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓山卦,卻偏偏與公主長得像鞋邑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子账蓉,可洞房花燭夜當晚...
    茶點故事閱讀 45,455評論 2 359

推薦閱讀更多精彩內(nèi)容