vue.js提供的各种API的内部实现原理

全局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