vue2源码解析之全局API实例详解_vue.js_

/* 作用: 使用基础vue构造器，创建一个子类，参数是一个包含组件选项的对象 `data` 选项是特例，需要注意 - 在 `Vue.extend()` 中它必须是函数 */ Vue.extend(options) // eg: 
 // 创建构造器 var Profile = Vue.extend({ template: '
{{firstName}} {{lastName}} aka {{alias}}
', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point') // 结果： 
Walter White aka Heisenberg

// 源码位置 src/core/global-api/extend.js Vue.extend = function (extendOptions: Object): Function { // 初始化参数 extendOptions = extendOptions || {} // 存储父类 const Super = this // 存储父类的唯一标识 const SuperId = Super.cid // 获取到参数中的缓存数据 const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}) // 如果已经缓存过就会缓存中获取返回 if (cachedCtors[SuperId]) { return cachedCtors[SuperId] } // 获取到name const name = extendOptions.name || Super.options.name if (process.env.NODE_ENV !== 'production' && name) { validateComponentName(name) } // 创建一个子类 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['super'] = Super // 如果子类中有props 进行初始化 if (Sub.options.props) { initProps(Sub) } // 如果子类中有计算属性，进行初始化 if (Sub.options.computed) { initComputed(Sub) } // 把父类的extend，mixin，use放在子类上 Sub.extend = Super.extend Sub.mixin = Super.mixin Sub.use = Super.use // 把指定的属性全部从父类上拷贝到子类上 ASSET_TYPES.forEach(function (type) { Sub[type] = Super[type] }) if (name) { Sub.options.components[name] = Sub } Sub.superOptions = Super.options Sub.extendOptions = extendOptions Sub.sealedOptions = extend({}, Sub.options) // cache constructor // 缓存子类 cachedCtors[SuperId] = Sub return Sub } } // 把子类中的props存储到原型上 function initProps (Comp) { const props = Comp.options.props for (const key in props) { proxy(Comp.prototype, `_props`, key) } } // 把子类中的计算属性存储到原型上 function initComputed (Comp) { const computed = Comp.options.computed for (const key in computed) { defineComputed(Comp.prototype, key, computed[key]) } }

// 注册 Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) // 注册 (指令函数) Vue.directive('my-directive', function () { // 这里将会被 `bind` 和 `update` 调用 }) // getter，返回已注册的指令 var myDirective = Vue.directive('my-directive')

// 注册 Vue.filter('my-filter',function(){}) // 获取 Vue.filter('my-filter')

// 注册 传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({})) // 注册 传入一个选项对象 Vue.component('my-component', {}) // 获取 Vue.component('my-component')

// 源码位置 src/core/global-api/ export const ASSET_TYPES = [ 'component', 'directive', 'filter' ] export function initAssetRegisters (Vue: GlobalAPI) { /** * Create asset registration methods. */ ASSET_TYPES.forEach(type => { Vue[type] = function ( id: string, definition: Function | Object ): Function | Object | void { // 不存在definition 表示获取，直接从options下的相应的typs+'s'进行获取 if (!definition) { return this.options[type + 's'][id] } else { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && type === 'component') { validateComponentName(id) } // 如果是组件 并且definition为一个{}对象，那么就通过extend继承vue if (type === 'component' && isPlainObject(definition)) { // 没有name就使用id definition.name = definition.name || id // 使definition继承vue definition = this.options._base.extend(definition) } // 如果是指令并且definition是一个函数，那么就把这个函数作为bind和update if (type === 'directive' && typeof definition === 'function') { definition = { bind: definition, update: definition } } // 设置值 保存到对应的key下 this.options[type + 's'][id] = definition return definition } } }) }

export const ASSET_TYPES = [ 'component', 'directive', 'filter' ] ASSET_TYPES.forEach(type => { Vue[type] = function ( id: string, definition: Function | Object ){} })

if (!definition) { return this.options[type + 's'][id] }

// 如果是组件 if (type === 'component' && isPlainObject(definition)) { // 没有name就使用id definition.name = definition.name || id // 使definition继承vue definition = this.options._base.extend(definition) }

// 如果是指令 if (type === 'directive' && typeof definition === 'function') { definition = { bind: definition, update: definition } }

// 设置值 this.options[type + 's'][id] = definition return definition

/* 作用： 安装 Vue.js 插件。如果插件是一个对象，必须提供 `install` 方法。 如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用 `new Vue()` 之前被调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次 plugin：- `{Object | Function} plugin` */ Vue.use( plugin )

// 源码位置 src/core/global-api/use.js export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { // 初始_installedPlugins变量 const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 如果已经存在直接返回 if (installedPlugins.indexOf(plugin) > -1) { return this } // 获取剩余的参数转成数组 const args = toArray(arguments, 1) // 把this添加进去 args.unshift(this) // 如果install是一个函数 直接执行 if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { // 如果插件是一个函数，直接执行 plugin.apply(null, args) } // 添加到数组中 installedPlugins.push(plugin) return this } }

// 初始_installedPlugins变量 const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 如果已经存在直接返回 if (installedPlugins.indexOf(plugin) > -1) { return this }

// 获取剩余的参数转成数组 const args = toArray(arguments, 1) // 把this添加进去 args.unshift(this)

// 如果install是一个函数 直接执行 if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) }

else if (typeof plugin === 'function') { // 如果插件是一个函数，直接执行 plugin.apply(null, args) }

// 添加到数组中 installedPlugins.push(plugin) return this

/* 作用： 全局注册一个混入，影响注册之后所有创建的每个vue实例，插件作者可以使用混入， 向组件注入自定义的行为。**不推荐在应用代码中使用
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：Ajv format校验使用示例分析_javascript技巧_
                                                                
下一篇：Vue中的v-for列表循环示例详解_vue.js_