全局API实现

Vue全局API通过 initGlobalAPI 初始化，挂载到Vue构造函数上实现组件注册、混合、插件等功能。

全局API初始化

JavaScript

// src/core/global-api/index.js
export function initGlobalAPI(Vue) {
  Vue.util = { warn, extend, mergeOptions, defineReactive }
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
  Vue.options = Object.create(null)
  
  initAssetRegisters(Vue)  // 注册component/directive/filter
  extend(Vue.options.components, builtInComponents)
}

全局API在构造函数上挂载，所有实例共享。

Vue.component 实现

JavaScript

// 注册组件
Vue.component = function(id, definition) {
  if (!definition) {
    return this.options.components[id]
  }
  if (isPlainObject(definition)) {
    definition.name = definition.name || id
    definition = this.options._base.extend(definition)
  }
  this.options.components[id] = definition
  return definition
}

组件注册本质是将组件选项存入 Vue.options.components。

Vue.extend 实现

JavaScript

Vue.extend = function(extendOptions) {
  const Super = this
  const Sub = function VueComponent(options) {
    this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(Super.options, extendOptions)
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  return Sub
}

Vue.extend 创建Vue构造函数的子类，用于组件实例化。

Vue.use 插件机制

JavaScript

Vue.use = function(plugin) {
  const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }
  
  const args = toArray(arguments, 1)
  args.unshift(this)
  
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args)
  }
  
  installedPlugins.push(plugin)
  return this
}

插件支持 install 方法或直接为函数，防止重复安装。

Vue.mixin 全局混合

JavaScript

Vue.mixin = function(mixin) {
  this.options = mergeOptions(this.options, mixin)
  return this
}

全局混合将mixin合并到 Vue.options，影响所有实例。

Vue.directive / Vue.filter

JavaScript

// 指令注册
Vue.directive = function(id, definition) {
  this.options.directives[id] = definition
}

// 过滤器注册
Vue.filter = function(id, definition) {
  this.options.filters[id] = definition
}

与组件注册逻辑相同，分别存入 directives 和 filters 选项。

Vue.set / Vue.delete

JavaScript

Vue.set = function(target, key, val) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  defineReactive(target, key, val)
  target.__ob__.dep.notify()
  return val
}

Vue.delete = function(target, key) {
  if (Array.isArray(target)) {
    target.splice(key, 1)
    return
  }
  delete target[key]
  target.__ob__.dep.notify()
}

Vue.set 处理数组直接赋值和对象新增属性的响应式问题。

要点总结

全局API通过 initGlobalAPI 挂载到Vue构造函数
Vue.component 将组件存入 Vue.options.components
Vue.extend 创建Vue子类用于组件实例化
Vue.use 支持插件的install方法或函数形式，防止重复安装
Vue.mixin 将混合选项合并到 Vue.options 影响所有实例
Vue.set/delete 解决对象新增属性和数组直接赋值的响应式问题