解释

Vue.use 其实就是一个 Vue 提供的全局 api , 我们在做项目的时候经常遇到要用一些不管是官方推荐的或者是第三方的插件, 例如 Vue-Router, Vuex, Element-UI 等等

这些第三方库和插件一般都是在项目的 main.js 文件中进行初始化, 且初始化的方法就是使用 Vue.use(插件名)

我们先来从使用到分析 Vue.use 是怎么实现的

语法

Vue.use(plugin, arguments)

参数:

{Object | Function} plugin
用法:

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次
参考插件

举个🌰

首先新建两个文件

plugin.js:

// 文件: src/plugins.js
const Plugin1 = {
  install(a, b, c) {
    console.log('Plugin1 第一个参数:', a);
    console.log('Plugin1 第二个参数:', b);
    console.log('Plugin1 第三个参数:', c);
  },
};
 
function Plugin2(a, b, c) {
  console.log('Plugin2 第一个参数:', a);
  console.log('Plugin2 第二个参数:', b);
  console.log('Plugin2 第三个参数:', c);
}
 
export { Plugin1, Plugin2 };

index.js:

// 文件: src/use/index.js
import Vue from 'vue';
 
import { Plugin1, Plugin2 } from './plugins';
 
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

然后在入口文件 main.js 里面引入 index.js

// 文件: src/main.js
import Vue from 'vue';
 
import '@/use';
import App from './App';
import router from './router';
 
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

此时我们执行 npm run dev 打开 8080 端口开启开发调试工具可以看到控制台输出以下信息

从中可以发现我们在 plugin1 中的 install 方法编写的三个 console 都打印出来，第一个打印出来的是 Vue 对象，第二个跟第三个是我们传入的两个参数。

而 plugin2 没有 install 方法，它本身就是一个方法，也能打印三个参数，第一个是 Vue 对象，第二个跟第三个也是我们传入的两个参数。

分析源码

// Vue源码文件路径：src/core/global-api/use.js
 
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
    }
 
  // additional parameters
    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 首先判断这个插件是否被注册过，不允许重复注册。

并且接收的 plugin 参数的限制是 Function | Object 两种类型。

对于这两种类型有不同的处理。

首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)。

再将 Vue 对象添加到这个数组的起始位置 args.unshift(this) ,这里的this 指向 Vue 对象

如果我们传入的 plugin(Vue.use的第一个参数) 的 install 是一个方法。也就是说如果我们传入一个对象，对象中包含 install 方法，那么我们就调用这个 plugin 的 install 方法并将整理好的数组当成参数传入 install 方法中。 => plugin.install.apply(plugin, args)

如果我们传入的 plugin 就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)

之后给这个插件添加至已经添加过的插件数组中，标示已经注册过 => installedPlugins.push(plugin)

最后返回 Vue 对象。