Vue全局API解析

Vue的很多方法是挂载在实例上，但是也有一些方法是挂载在Vue类上，其被称之为全局API。全局API有12个，Vue.extend、Vue.nextTick、Vue.set、Vue.delete、Vue.directive、Vue.filter、Vue.component、Vue.use、Vue.mixin、Vue.observable、Vue.version下面就一一介绍：

1、Vue.extend

• 用法：Vue.extend( options )
• 作用：创建一个继承自Vue类的子类，可接收的参数是一个包含组件选项的对象。
• 原理：创建子类的过程其实就是一边给子类上添加上独有的属性，一边将父类的公共属性复制到子类上。整个过程就是先创建一个类Sub，接着通过原型继承的方式将该类继承基础Vue类，然后给Sub类添加一些属性以及将父类的某些属性复制到Sub类上，最后将Sub类返回。创建好的子类Sub作为value，存入缓存池cachedCtors中。

Vue.nextTick

• 用法：Vue.nextTick( [callback, context] )
• 作用：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
• 原理：

Vue.set

• 用法：Vue.set( target, propertyName/index, value )
• 作用：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性
• 原理：通过defineReactive方法给target上添加一个响应式属性，添加依赖

Vue.delete

• 用法：Vue.delete( target, propertyName/index )
• 作用：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它
• 原理：删除属性，移除依赖

Vue.directive

• 用法：Vue.directive( id, [definition] )
• 作用：注册或获取全局指令
• 原理：definition存在为注册，反之为获取。判断definition参数是否是一个函数，如果是函数，则默认监听bind和update两个事件，即将definition函数分别赋给bind和update两个属性。如果definition参数不是一个函数，那么即认为它是用户自定义的指令对象，直接将其保存在this.options['directives']中

Vue.filter

• 用法：Vue.filter( id, [definition] )
• 作用：注册或获取全局过滤器
• 原理：Vue.options['filters']是用来存放全局过滤器的地方。根据是否传入了definition参数来决定本次操作是注册过滤器还是获取过滤器

Vue.component

• 用法：Vue.component( id, [definition] )
• 作用：注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
• 原理：Vue.options['components']是用来存放全局组件的地方。还是根据是否传入了definition参数来决定本次操作是注册组件还是获取组件

Vue.use

• 用法：Vue.use( plugin )
• 作用：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用 new Vue() 之前被调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次。
• 原理：首先定义一个数组用于防止重复安装；其次处理参数：数组化+Vue插入到第一个参数位置；再者根据传入的插件类型完成插件安装。最后将该插件添加进已安装插件列表中，防止重复安装

Vue.mixin

• 用法：Vue.mixin( mixin )
• 作用：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
• 原理：该API就是通过修改Vue.options属性进而影响之后的所有Vue实例。所以我们只需将传入的mixin对象与this.options合并即可，然后将合并后的新对象作为this.options传给之后的所有Vue实例，从而达到改变其原有特性的效果。

Vue.compile

• 用法：Vue.compile( template )
• 作用：在 render 函数中编译模板字符串。只在独立构建时有效
• 原理：该API是用来编译模板字符串的，我们在日常业务开发中几乎用不到，它内部是调用了compileToFunctions方法

Vue.observable

• 用法：Vue.observable( object )
• 作用：让一个对象可响应。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：
• 原理：该API是用来将一个普通对象转化成响应式对象。在日常业务开发中也几乎用不到，它内部是调用了observe方法

Vue.version

• 用法：Vue.version
• 作用：提供字符串形式的 Vue 安装版本号
• 原理：该API是在构建时读取了package.json中的version字段，然后将其赋值给Vue.version