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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容