标签：function definition vue Sub directive Vue js API options

全局API和实例方法不同，后者是在Vue的原型上挂载方法，也就是在Vue.prototype上挂载方法，而前者是直接在Vue上挂载方法。示例：

vue.extend = function(extendOption) {
  ...
}

Vue.extend

参数：Vue.extend({})
用法：使用基础Vue构造器创建一个"子类"，参数是包含组件选项的对象
data选项是特例，在Vue.extend中，它必须是函数，完整代码：

    let cid = 1
    Vue.extend = function (extendOptions) {
        extendOptions = extendOptions || {}
        const Super = this
        const SuperId = Super.cid
        const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
        if(cachedCtors[SuperId]) {
            return cachedCtors[SuperId]
        }
        const 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 name' + 
                    'can only contain alphaumeric characters and the hyphen, ' +
                    'and must start with a letter.'
                )
            }
        }
        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

        if(Sub.options.props) {
            initProps(Sub)
        }

        if(Sub.options.computed) {
            initComputed(Sub)
        }

        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)

        //缓存构造函数
        cachedCtors[SuperId] = Sub
        return Sub
    }

Vue.directive(id, [definition])

参数：{String} id，{function | Object} [definition]
用法：注册或获取全局指令。

    //注册
    Vue.directive('my-directive', {
        bind: function() {},
        inserted: function() {},
        update: function() {},
        componentUpdated: function() {},
        unbind: function() {}
    })

    //注册（指令函数）
    Vue.directive('my-directive', function() {
        //这里将会被bind和updata调用
    })

    //getter方法，返回已注册的指令
    let myDirective = Vue.directive('my-directive')

Vue.directive方法的作用是注册或获取全局指令，而不是让指令生效。
注册指令代码实现：

    //用于保存指令的位置
    Vue.options = Object.create(null)
    Vue.options['directives'] = Object.create(null)

    Vue.directive = function (id, definition) {
        if(!definition) {
            //直接返回之前保存好了的
            return this.options['directives'][id]
        } else {
            if(typeof definition === 'function') {
                //默认监听并给definition重新赋值
                definition = { bind: definition, update: definition}
            }
        }
        //保存到options中
        this.options['directives'][id] = definition
        return definition
    }

首先在Vue构造函数上创建了options熟悉来存放选项，并在选项上新增directive方法。
这个方法接收两个参数，它可以用来注册和获取指令，当definition为空的时候，根据id直接返回指令。当definition存在时，说明是注册指令，检查definition的类型，如果为函数的话就将bind，undate两个函数默认监听，并用这个对象去覆盖definition，然后在options中保存，最后返回definition；如果不是函数说明是用户自定义的指令，直接保存在options上不进行操作。

Vue.filter(id, [definition])

参数：{string} id，{Function | Object} [definition]
用法：注册或获取全局过滤器。

    //注册
    Vue.filter('my-filter', value => {
        //返回处理后的值
    })

    // getter的方法，返回已注册的过滤器
    let myFilter = Vue.filter('my-filter')

过滤器可以用在两个地方：双花括号插值和v-bind表达式：

//在双花括号里
{{ message | my-filter}}

//在v-bind中
<div v-bind:id = 'rawId | my-filter'></div>

与Vue.directive类似，Vue.filter的作用仅仅是注册或获取全局过滤器。它们俩的注册过程也很类似，将过滤器保存在Vue.options['filters']中即可。代码实现：

    Vue.options['filters'] = Object.create(null)

    Vue.filter = function (id, definition) {
        if(!definition) {
            //直接返回之前保存的
            return this.options['filters'][id]
        } else {
            //注册过滤器
            this.options['filters'][id] = definition
            return definition
        }
    }

标签：function,definition,vue,Sub,directive,Vue,js,API,options
来源： https://www.cnblogs.com/taosifan/p/15329066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。