Vue源码学习三 ———— Vue构造函数包装

2022-11-09 11:58:44

Vue源码学习二是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数

来到 src/core/index.js 代码是:

    import Vue from './instance/index'
    import { initGlobalAPI } from './global-api/index'
    import { isServerRendering } from 'core/shared/env'
    import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

    // 将 Vue 构造函数作为参数, 传递给 initGlobalAPI 方法
    // 向Vue.prototype 上添加一些静态属性和方法
    initGlobalAPI(Vue)

    Object.defineProperty(Vue.prototype, '$isServer', {
      get: isServerRendering
    })

    Object.defineProperty(Vue.prototype, '$ssrContext', {
      get () {
        /* istanbul ignore next */
        return this.$vnode && this.$vnode.ssrContext
      }
    })

    // expose FunctionalRenderContext for ssr runtime helper installation
    Object.defineProperty(Vue, 'FunctionalRenderContext', {
      value: FunctionalRenderContext
    })

    Vue.version = '__VERSION__'
    // http://hcysun.me/vue-design/art/2vue-constructor.html#with-compiler
    export default Vue

看第一句 import Vue from './instance/index', 导入了Vue这个构造函数,且原型在上面已经添加了一些属性和方法。

然后 initGlobalAPI(Vue)执行 initGlobalAPI 方法并且将 Vue构造函数就为参数调用。
又再 Vue的原型上添加了两个只读的属性 $isServer、$ssrContext。并且再 Vue构造函数上定义了 FunctionalRenderContext静态属性,之所以在 Vue构造函数上定义,是因为在 ssr的时候要使用它。最后 Vue.version = '__VERSION__'又在 Vue构造函数上定义了version,即版本号。

然后再看 initGlobalAPI 方法的来源地, 它主要是丰富 Vue构造函数,在构造函数上添加静态属性和方法。import { initGlobalAPI } from './global-api/index'。来到 ./global-api/index.js文件中

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  // Vue构造函数上添加config属性, 也是只读的属性。
  // Vue.config 代理的是从../config文件导出的对象
  Object.defineProperty(Vue, 'config', configDef)

首先是这样的一段代码, 这段代码是在 Vue构造函数上添加 config属性, 他也是一个只读的属性,和 $data、$prop是一样的。当你试图修改这个属性时,在非生产环境下会给你提醒warn。
这个 config从哪里来的呢, 这个文件的最顶部 import config from '../config'。
所以 Vue.config 代理的是从 core/config导入的config对象。

然后是这样一段代码:

 // exposed shared methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

这是在Vue原型上添加了一个 util属性,它是一个对象。这个对象有四个属性 warn、extend、mergeOptions、defineReactive。他们都是来自于 src/core/util/index文件中。官网上没有这些api的说明, 也不推荐使用。

然后是一段这样的代码:

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  // options 通过Object.create()创建的一个空对象
  Vue.options = Object.create(null)

上面这段代码是在 Vue构造函数上又添加了四个属性 set、delete、nextTick和 options。options是通过 Object.create(null)创建的一个空对象。下面的代码即丰富了 options这个对象。

   ASSET_TYPES.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

ASSET_TYPES是上面呢?很明显他是一个数组,遍历它的每一个属性 + s 并且添加到 Vue.options上。并且初始赋值的都是 Object.create(null)。看一下 ASSET_TYPES来自src/shared/constants.js文件。

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

可以看到 ASSET_TYPES是这么一个数组。原来是通过遍历向 Vue.options中添加 components、directives、filters。

到目前,Vue.options现在是这样样子:

Vue.options = {
    components: Object.create(null),
    directives: Object.create(null),
    filters: Object.create(null),
    _base: Vue
}

然后继续向下看是这样的一句代码

extend(Vue.options.components, builtInComponents)

extend是 Vue的一个工具方法，在 src/shared/util.js文件中

/**
 * Mix properties into target object.
 */
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

主要作用是将一个对象的属性混入到另外一个对象中。
那么上面的 extend(Vue.options.components, builtInComponents)的意思就是将 builtInComponents对象的属性混入到 Vue.options.components对象中。那么builtInComponents对象是啥呢? 来到 src/core/components/indes.js文件中:

import KeepAlive from './keep-alive'

export default {
  KeepAlive
}

就是将 KeepAlive 这个属性添加到 Vue.options.conponents中。

那么到目前为止, Vue.options对象已经变成了这个样子

Vue.options = {
    components: {
        KeepAlive
    },
    directives: Object.create(null),
    filters: Object.create(null),
    _base: Vue
}

再看这个文件的最后一部分代码

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)

依此调用了四个方法,都是将 Vue这个构造函数作为其参数。initUse、initMixin、initExtend、initAssetRegisters四个方法分别来自 ./global-api/use.js、./global-api/mixin.js、./global-api/extend.js、./global-api/assets.js文件。

先看 initUse文件:

// 全局的 Vue.use()  用来安装插件的方法

export function initUse (Vue: GlobalAPI) {
  Vue.use = function(){}
}

该方法的主要作用是在 Vue上添加 use方法,也就是用来安装 Vue插件的全局API Vue.use()。

initMixin文件

// 在Vue上添加mixin的全局API
export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

initMixin方法的主要作用是在 Vue原型上添加 mixin这个全局API。再看 initExtend

initExtend文件

export function initExtend (Vue: GlobalAPI) {
  /**
   * Each instance constructor, including Vue, has a unique
   * cid. This enables us to create wrapped "child
   * constructors" for prototypal inheritance and cache them.
   */
  Vue.cid = 0
  let cid = 1

  /**
   * Class inheritance
   */
  // 使用基础Vue构造器, 创建一个"子类", 参数是一个包含组件选项的对象
  // API 详细 https://cn.vuejs.org/v2/api/#Vue-extend
  // ...
  Vue.extend = function (extendOptions: Object): Function {

  }
}

这个方法在 Vue构造函数上添加了 cid、extend一个静态属性和一个静态方法。

最后一个 initAssetRegisters文件

import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (){}
}

ASSET_TYPES这个文件前面见到过:

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

这个方法的主要作用是在 Vue 构造函数上添加全局的 component、directive、filter, 分别用来注册 全局组件、指令、过滤器的。

initGlobalAPI这个方法就说完了。就是在 Vue这个构造函数上定义静态属性和方法。Vue的出生文件是在 Vue原型对象上丰富了内容,现在又再 Vue构造函数上丰富了内容。

到现在 Vue 构造函数上有以下属性和方法

// initGlobalAPI
Vue.config
Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
}
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
Vue.options = {
    components: {
        KeepAlive
    },
    directives: Object.create(null),
    filters: Object.create(null),
    _base: Vue
}

// initUse ***************** global-api/use.js
Vue.use = function (plugin: Function | Object) {}

// initMixin ***************** global-api/mixin.js
Vue.mixin = function (mixin: Object) {}

// initExtend ***************** global-api/extend.js
Vue.cid = 0
Vue.extend = function (extendOptions: Object): Function {}

// initAssetRegisters ***************** global-api/assets.js
Vue.component =
Vue.directive =
Vue.filter = function (
  id: string,
  definition: Function | Object
): Function | Object | void {}

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

码农公寓

相关文章