[TOC] **** ## 8 [\core\global-api\] 全局api目录 ### 8-1 目录文件 ~~~ \core\global-api\ index.js ;全局api入口文件 extends.js ;Vue.extend()扩展接口 mixin.js ;Vue.mixin()合并接口 use.js ;Vue.use()插件接口 assets.js ;Vue组件资源 ~~~  ### 8-2 (index.js)入口文件 >[info] import ~~~ ;(导入)全局配置,基础工具,全局api初始化接口,observer接口 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' ~~~ >[info] module ~~~ export function initGlobalAPI (Vue) { ;创建Vue.config,Vue.util,Vue.set,Vue.delete,Vue.nextTick Vue.config = config Vue.util = util Vue.set = set Vue.delete = del Vue.nextTick = util.nextTick ;Vue.options扩展 ;;Vue.options = { ;; directives: Object.create(null), ;; filters: Object.create(null), ;; components: Object.create(null), ;; transitions: Object.create(null) ;;}; Vue.options = Object.create(null) config._assetTypes.forEach(type => { Vue.options[type + 's'] = Object.create(null) }) ;全局api初始化 initUse(Vue) initMixin(Vue) initExtend(Vue) initAssetRegisters(Vue) } ~~~ >[info] export ~~~ ;全局api的安装接口 export function initGlobalAPI (Vue) {} ~~~  ### 8-3 (extend.js)扩展接口 >[info] import ~~~ ;(导入)全局配置,基础工具 import config from '../config' import { warn, mergeOptions } from '../util/index' ~~~ >[info] module ~~~ ;全局api扩展Vue.extend()接口 export function initExtend (Vue) { ;cid初始化 Vue.cid = 0 let cid = 1 ;Vue.extend()扩展接口 Vue.extend = function (extendOptions) { ;扩展选项,父级结构,是否第一个子扩展 extendOptions = extendOptions || {} const Super = this const isFirstExtend = Super.cid === 0 ;第一个子扩展,返回extendOptions._Ctor if (isFirstExtend && extendOptions._Ctor) { return extendOptions._Ctor } ;获取扩展name let name = extendOptions.name || Super.options.name if (process.env.NODE_ENV !== 'production') { if (!/^[a-zA-Z][\w-]*$/.test(name)) { warn( 'Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.' ) name = null } } ;子组件创建 const Sub = function VueComponent (options) { this._init(options) } ;Sub.xx属性初始化 Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub Sub.cid = cid++ Sub.options = mergeOptions( Super.options, extendOptions ) Sub['super'] = Super Sub.extend = Super.extend ;组件配置属性 config._assetTypes.forEach(function (type) { Sub[type] = Super[type] }) ;注册子组织到name if (name) { Sub.options.components[name] = Sub } ;首个子组件 if (isFirstExtend) { extendOptions._Ctor = Sub } ;返回扩展子组件 return Sub } } ~~~ >[info] export  ### 8-4 (mixin.js)混合接口 >[info] import ~~~ ;(导入)基础工具 import { mergeOptions } from '../util/index' ~~~ >[info] module ~~~ ;属性合并(Vue.mixin)接口 export function initMixin (Vue) { ;Vue.mixin()调用mergeOptions()合并属性 Vue.mixin = function (mixin) { Vue.options = mergeOptions(Vue.options, mixin) } } ~~~ >[info] export ~~~ ;(导出)属性合并接口 export function initMixin (Vue) {} ~~~  ### 8-5 use.js(插件接口) >[info] import ~~~ ;(导入)基础工具 import { toArray } from '../util/index' ~~~ >[info] module ~~~ export function initUse (Vue) { ;插件扩展Vue.use()接口 Vue.use = function (plugin) { ;检查插件是否安装 if (plugin.installed) { return } ;获取参数 const args = toArray(arguments, 1) args.unshift(this) ;插件安装plugin.install() if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else { plugin.apply(null, args) } ;设置插件安装状态为已安装 plugin.installed = true return this } } ~~~ >[info] export ~~~ ;(导出)插件扩展接口 export function initUse (Vue) {} ~~~  ### 8-6 assets.js(资源接口) >[info] import ~~~ ;(导入)全局配置，基础工具 import config from '../config' import { warn, isPlainObject } from '../util/index' ~~~ >[info] module ~~~ ;资源注册初始化 export function initAssetRegisters (Vue) { ;config._assetType,配置资源注册 config._assetTypes.forEach(function (type) { Vue[type] = function (id, definition) { if (!definition) { return this.options[type + 's'][id] } else { if (process.env.NODE_ENV !== 'production') { if (type === 'component' && config.isReservedTag(id)) { warn( 'Do not use built-in or reserved HTML elements as component ' + 'id: ' + id ) } } ;组件资源 if (type === 'component' && isPlainObject(definition)) { definition.name = id definition = Vue.extend(definition) } ;注册资源到vm.options中 this.options[type + 's'][id] = definition return definition } } }) } ~~~ >[info] export ~~~ ;(导出)资源注册接口 export function initAssetRegisters (Vue) {} ~~~