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<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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容