[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) {} ~~~