在做 vue 开发的时候大家一定经常接触 Vue.use() 方法，那 Vue.use() 到底有什么用呢?

用法:

官方解释:

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

简单来说，是用于安装插件的，但是为什么 Vue.use() 必须在调用 new Vue() 之前被调用？

主要是因为安装组件时，组件给Vue添加全局功能，所以必须写在 new Vue() 之前，否则创建的Vue实例无法获取插件添加的Vue全局功能

举个栗子:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  //... options
})

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

Vue.use(MyPlugin, { someOption: true })

Vue.use() 会自动阻止多次注册相同插件，届时只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在例如 CommonJS 的模块环境中，你应该始终显式地调用 Vue.use()：

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

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

简单总结

1.通过全局方法 Vue.use() 使用插件

2.Vue.use 会自动阻止多次注册相同插件

3.它需要在你调用 new Vue() 启动应用之前完成

4.Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function，如果是 Object 那么这个 Object 需要定义一个 install 方法，如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其他参数是 Vue.use() 执行时传入的其他参数。

使用场景:

可以在项目中使用vue.use()全局注入一个插件，从而不需要在每个组件文件中import插件。例如： 不使用vue.use()注入插件：

const utils = require('./utils')
// 或者
import utils from './utils'

使用vue.use()注入插件，最典型的案例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

使用了vue.use()注册插件之后就可以在所有的vue文件中使用路由： this.$route

如何实现?

源码

在 src/core/global-api/use.js 下找到 Vue.use() 方法的定义，源码简单的连20行代码都没有！

import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

Vue.use = function (plugin: Function | Object) ，这行代码看上去奇奇怪怪，跟我们平时写的不太一样，这个是用的Flow语法，Flow 是 facebook 出品的 JavaScript 静态类型检查工具。官网在此：https://flow.org/en/docs/getting-started/，具体的优缺点自己去看吧

了解一下源码实现了什么逻辑

1.判断插件 plugin 是否为 Function 或者为 Object

Vue.use = function (plugin: Function | Object)

在全局api Vue 上定义了 use 方法，接收一个 plugin 参数可以是 Function 也可以是 Object，这就和前面官方规定的 Vue.use() 第一个参数要求的类型对应上了。

2.判断该插件是否已经注册过了，防止重复注册

if (installedPlugins.indexOf(plugin) > -1)

3.取读参数

const args = toArray(arguments, 1)

先看一下工具函数 toArray 源码: ，该函数定义在 src/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
}

let i = list.length - start 意思是vue.use()方法传入的参数，除第一个参数外（第一个参数是插件plugin），其他参数都存储到一个数组中，并且将vue对象插入到参数数组的第一位。

最后参数数组就是[vue,arg1,arg2,...]，后面的 1 先理解成一个常量。

toArray 方法的作用就是把第一个 Array 参数从下标为1截取到最后。也就拿到了 Vue.use() 方法除去第一个之外的其他参数，这些参数准备在调用 instll 方法的时候传入。

4.判断传入的参数是否有install方法，如果有就直接执行install()，没有就把plugin放做install执行，用 apply 改变 this 指向，并把 toArray 得到的剩余参数传入。

if (typeof plugin.install === 'function') {
  // 将install方法绑定在 plugin 环境中执行，并且传入args参数数组进install方法。
  // 此时install方法内的 this 指向 plugin 对象
  plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
  // plugin内的 this 指向 null
  plugin.apply(null, args)
}

5.最后记录该组件已经注册过了，保证每个插件只会被注册一次

installedPlugins.push(plugin)

总结

1.使用 Vue.use() 注册插件，本质上就是执行了一个 install 方法，install 里的内容由开发者自己定义

2.插件不管是函数还是install方法 ，第一个参数总是vue对象

最后欢迎大家来纠错、提建议，一起学习！

如果对你有帮助，可以转发/收藏，点个赞给个支持一下吧~