第12章 (第④篇整体流程）实例方法与全局API的实现原理（下）

4. 全局API的实现原理

4.1 Vue.extend

Vue.extend( options )

【参数】{Object} options
【用法】使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。
data选项是特例，在Vue.extend()中，它必须是一个函数。

<div id="mount-point"></div>
//创建构造器
var Profile = Vue.extend({
    template:'<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data:function(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    }
})
//创建Profile实例，并挂载到一个元素上
new Profile().$mount('$mount-point')

//结果如下
<p>Walter White aka Heisenberg</p>

全局API和实例方法不同，后者是在Vue原型上挂载方法，也就是Vue.prototype，而前者是直接在Vue上挂载的方法。extend作用是创建一个子类，让它继承Vue身上的一些功能。
Vue.extend方法内增加了缓存策略，反复调用extend返回同一个结果，再次调用extend方法只需从缓存中取出结果即可。

4.2 Vue.nextTick

Vue.nextTick( [callback,context] )

【参数】{Function} [callback] || {Object} context
【用法】在下次DOM更新循环结束之后执行延迟回调，修改数据之后立即使用这个方法来获取更新后的DOM
【实例】

//修改数据
vm.msg = 'hello'
//DOM还没有更新
Vue.nextTick(function(){ // DOM更新了 })
//作为Promise使用（Vue.js2.1.0新增）
Vue.nextTick().then(function(){ // DOM更新了 })

4.3 Vue.set

Vue.set( target.key,value )

【参数】{Object|Array} target || {string|number} key || {any} value
【返回值】设置的值
【用法】设置对象的属性。如果对象是响应式的，确保属性被创建以后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加后的限制。

4.4 Vue.delete

Vue.delete( target.key )

【参数】{Object|Array} target || {string|number} key/index
【用法】删除对象的属性。如果对象是响应式的，确保属性删除能触发更新视图。这个方法主要用于避开Vue不能检测属性被删除后的限制。

4.5 Vue.directive

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和update调用
})

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

Vue除了默认内置的指令外（v-model\v-show）等等，还允许注册自定义指令，这里directive只是注册和获取指令，并不是让指令生效，注册指令是将指令保存在某个位置，生效是从某个位置拿出来执行。
在Vue构造函数上创建了options属性来存放选项，并在选项上新增了directive方法用于存放指令
如果difinition参数不存在，则使用id从this.options['directives']中读取指令并返回，如果存在，说明是注册操作，那么进而判断definition参数的类型是否是函数，如果是函数，就默认监听bind和update两个事件，如果不是，则说明是用户定义的指令对象，什么都不用做。

4.6 Vue.filter

Vue.filter( id,[definition] )

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

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

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

Vue允许自定义过滤器，可被用于格式化一些常见的文本。过滤器可以用在双花括号插值和v-bind表达式中。

{{message | capitalize}}
<div v-bind:id="rawId | formatId"></div>

仅仅是注册和获取全局过滤器，并不是使其生效，将过滤器保存在this.options['filters']。
第二个参数不存在，则是读取过滤器将其返回，如果存在，说明是注册操作，将该参数保存到选项的filter属性中。

4.7 Vue.component

Vue.component( id,[definition] )

【参数】{string} id || {Function|Object} [definition]
【用法】注册或获取全局组件。注册组件时，还会自动使用给定的id设置组件的名称。

//注册组件，传入一个扩展过的构造器
Vue.component('my-component',Vue.extend({ /* ... */ }))
//注册组件，传入一个选项对象（自动调用Vue.extend）
Vue.component('my-component',{ /* ... */ })
//获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

组件保存在this.options['components']。如果definition参数是Object类型，则调用Vue.extend方法将它变成Vue的子类，使用Vue.component方法注册组件；如果选项对象中没有设置组件名，则自动使用给定的id设置组件的名称。

4.8 Vue.use

Vue.use( plugin )

【参数】 {Object|Function} plugin
【用法】安装Vue.js插件

4.9 Vue.mixin

Vue.use( plugin )

【参数】 {Object} mixin
【用法】全局注册一个混入（mixin），影响注册之后创建的每个Vue.js实例。插件作者可以使用混入向组件注入自定义行为。

4.10 Vue.compile

Vue.compile( template )

【参数】 {string} template
【用法】编译模板字符串并返回包含渲染函数的对象。

4.11 Vue.version

【用法】提供字符串形式的Vue.js安装版本号

第12章 (第④篇 整体流程）实例方法与全局API的实现原理（下）