讲透Vue.use() 的使用干什么？ Vue.use()是用来使用插件的。插件的作用：插件通常用来为Vue添加

干什么？

Vue.use()是用来使用插件的。

插件的作用：插件通常用来为Vue添加全局功能，插件的功能没有严格的限制，一般有以下几种：

添加全局方法或property,如：vue-custom-element
添加全局资源：指令、过滤器、过度等，如：vue-touch
通过全局混入来添加一些组件选项，如： vue-router
添加Vue实例方法，通过把它们添加到Vue.prototype上实现
一个库，提供自己的API,同时提供上边的一种或几种功能，如： vue-router

import LoadingComponent from './LoadingComponent.vue';

const MyPlugin = {};

MyPlugin.install = function(Vue, options) { // 1, 添加全局方法或属性 Vue.myGlobalVariable = "hahha"; Vue.myGlobalMethods = function(){ //... }

// 2, 添加全局资源 // 注册一个全局组件 loading, 不用 import 可以在任何位置使用 Vue.component('Loading', LoadingComponent) Vue.directive('my-directive', { bind(el, binding, vnode, oldnode){ // logic } })

// 3, mixins Vue.mixin({ created(){ // logic }, mounted(){ // logic } })

// 4, 在原型上添加实例方法，被各个实例继承 Vue.prototype.$MyMethods = function(mOptions) { // logic } }

在什么时候用？

通过全局方法 Vue.use()使用插件，它需要你在调用new Vue()启用应用之前完成。

// 调用 myPlugin.install(Vue)
Vue.use(myPlugin)

new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(myPlugin,{someOptions:true})

Vue.use会自动阻止多次注册相同的插件，届时即使多次调用也只会注册一次该插件

Vue.js 官方提供的一些插件，如：vue-router，在检测到 Vue是可访问的全局变量时，会自动调用Vue.use(),然而在像

开发插件

Vue.js的插件，应该暴露一个 install方法，
这个方法的第一个参数是Vue构造器,
第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) { //1.添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } //2.添加全局资源 -自定义指令 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) //3.注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... })

//4.添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... } }

Vue.use用法

安装Vue.js插件，如果插件是一个 对象,必须提供 install方法，如果插件是一个函数，它会被作为install方法，install方法调用是，会将Vue作为参数传入
Vue.use()需要在调用 new Vue()之前被调用

所以，Vue.use的参数必须是一个Object对象或者function函数,如果是对象的话，必须要提供install方法，之后会将Vue作为参数传入

也就是说：

Vue.use的参数为函数时，这个函数的参数是 Vue对象
Vue.use的参数为对象时，install方法的参数是Vue对象

Vue.use的源码

import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
    // 首先先判断插件plugin是否是对象或者函数：
    Vue.use = function (plugin: Function | Object) {
        const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
        if (installedPlugins.indexOf(plugin) > -1) {
            return this
        }
        
        // 取vue.use参数,toArray() 方法代码在下一个代码块
        const args = toArray(arguments, 1)
        args.unshift(this)
        // 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当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
    }
}

// toArray 方法源码
export function toArray (list: any, start?: number): Array<any> {
    start = start || 0
    let i = list.length - start
    const ret: Array<any> = new Array(i)
    while (i--) {
        ret[i] = list[i + start]
    }
    return ret
}

总结 Vue.use()源码

首先判断插件 plugin 是否是对象或者函数代码：

`plugin: Function | Objec
判断Vue是否已注册过这个插件，如果注册过就跳出方法,代码：

const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法 if (installedPlugins.indexOf(plugin) > -1) { return this }
处理Vue.use的入参，将第一个参数之后的参数归集,并在首部塞入this上下文，代码：

const args = toArray(arguments, 1) args.unshift(this)
断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。代码：

if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) }
缓存插件,代码：

installedPlugins.push(plugin)

插件案例

以常用的ElementUI看一下，是如何封装组件。代码如下。我们可以按照这个规范封装属于自己的组件库。

import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
//省....
const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  CollapseTransition
 ]

 const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    //这段就是将组件注入vue实例
    Vue.component(component.name, component);
  });

  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

export default {
  version: '2.13.2',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  CollapseTransition
}