Vue.use注册插件

在搞清楚如何用Vue.use注册插件之前，首先需要理清楚一个问题，就是插件和组件的区别。组件比较简单，比如弹框组件，轮播组件等。但是当一个组件被各个页面都可能用到，这时候如果每个页面还要依次去引用，这样就会显得十分累赘。所以，可以将这样的组件进行全局注册，然后各个页面直接可以使用，这就是插件。

插件的功能范围

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

• 添加全局方法或者属性。如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如 vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

注册插件流程

以下是注册全局插件的代码，导出的Plugins是一个对象，对象仅有一个install方法，它有两个参数：

• 第一个参数是Vue实例。用于在函数内部给Vue实例上绑定插件。（这里是不是挺神奇的，这个Vue的示例哪来的，后面会提到）
• 第二个参数是可选的选项对象。它是Vue.use(Plugins,options)传入的，可以灵活配置。

//Plugins.js
let Plugins = {
    install(Vue,options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {}
        // 2. 添加全局资源
        Vue.directive('my-directive', {
            bind(el, binding, vnode, oldVnode) {}
        })
        // 3. 注入组件选项
        Vue.mixin({
            created: function () {}
        })
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {}
    }
};
export default Plugins;

配置完成后，我们就可以在main.js中引入这个Plugins.js，然后通过Vue.use来注册。Vue.use需要在你调用new Vue()启动应用之前完成。

//main.js
import Plugins from './utils/Plugins';
Vue.use(Plugins);

以上就是注册插件的代码，之前看的时候我会有以下的疑惑：
*install和Vue.use有什么关系？
*install参数里的Vue实例是哪里的？

带着以上这些疑惑可以看下Vue.use底层实现的逻辑：

Vue.use具体做了什么

以下是Vue.use实现的代码：

// plugin的参数可以试函数或者是对象
Vue.use = function (plugin: Function | Object) {
    // installedPlugins表示已注册的插件列表
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 如果已注册的插件列表有该插件，那就直接return，防止重复注册
    if (installedPlugins.indexOf(plugin) > -1) return this

    // 生成一个新的数组args，把arguments除了第一个元素外的其余元素赋值给args
    const args = toArray(arguments, 1)
    //将args的第一个参数设置为vue实例
    args.unshift(this)

    // 判断plugin的install是否为函数，如果为函数，执行pluign.install方法
    if (typeof plugin.install === 'function') {
        //将args传入install函数并执行，第一个参数是Vue实例
        plugin.install.apply(plugin, args)
    // 如果plugin本身就是一个函数的话，那就直接执行
    } else if (typeof plugin === 'function') {
        //将args传入install函数并执行，第一个参数是Vue实例
        plugin.apply(null, args)
    }

    //将当前注册的插件放到全局插件数组中，保证每个插件只会注册一次
    installedPlugins.push(plugin)
    return this
}

再补充下toArray源码，toArray生成一个新的数组args，把arguments除了第一个元素外的其余元素赋值给args，举个例子：toArray([1,2,3,4,5,6],2)，最后得到的是[3,4,5,6]。

// Vue源码文件路径：src/core/shared/util.js
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
}

如果看完以上的注释代码，可以再看下之前的两个问题：

install和Vue.use有什么关系

install和Vue.use是搭配使用的。使用Vue.use(Plugins)去注册Plugins，如果Plugins是个对象，Vue.use会检查是否Plugins有install方法，有的话会执行，没有install方法的话那就什么都不会执行。
要注意的是Vue.use的参数可以是函数或者是对象。如果参数是一个对象，Vue.use会默认执行该对象中的install方法，如果参数是一个函数，那这个函数就被当做install方法。

install参数里的Vue实例是哪里的？

这个从Vue.use实现的代码就可以看出来：

// 生成一个新的数组args，把arguments除了第一个元素外的其余元素赋值给args
const args = toArray(arguments, 1)
//将args的第一个参数设置为vue实例
args.unshift(this)

// 判断plugin的install是否为函数，如果为函数，执行pluign.install方法
if (typeof plugin.install === 'function') {
    //将args传入install函数并执行，第一个参数是Vue实例
    plugin.install.apply(plugin, args)
// 如果plugin本身就是一个函数的话，那就直接执行
} else if (typeof plugin === 'function') {
    //将args传入install函数并执行，第一个参数是Vue实例
    plugin.apply(null, args)
}

plugin.install.apply(plugin, args)当plugin被执行的时候，传入的是args作为参数，args的第一个参数被设置成Vue实例，即args.unshift(this)。所以可以在install里获取到Vue实例。