Vue.use是干什么的？原理是什么？

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

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

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

通过全局方法 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(),然而在像 CommonJS这样的模块环境中，你应该始终显式的调用Vue.use()

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
const Vue = require('vue')
const VueRouter = require('vue-router')

//别忘了调用此方法
Vue.use(VueRouter )

开发插件

• 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 {
    start = start || 0
    let i = list.length - start
    const ret: Array = new Array(i)
    while (i--) {
        ret[i] = list[i + start]
    }
    return ret
}

总结 Vue.use()源码

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

`plugin: Function | Object`

2. 判断Vue是否已注册过这个插件，如果注册过就跳出方法,代码：

 const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
        if (installedPlugins.indexOf(plugin) > -1) {
            return this
        }

3. 处理Vue.use的入参，将第一个参数之后的参数归集,并在首部塞入this上下文，代码：

const args = toArray(arguments, 1)
args.unshift(this)

4. 断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。代码：

 if (typeof plugin.install === 'function') {
     plugin.install.apply(plugin, args)
 } else if (typeof plugin === 'function') {
     plugin.apply(null, args)
 }

5. 缓存插件,代码：

installedPlugins.push(plugin)