在使用vant库的时候看到文档说要先引入文件，并使用vue.use来使用组件，这里就想着之前没碰到过这个函数边想着看看源码，了解一下基本原理

Vue.use()的基本使用

这里就不举vant组件库的例子的，感觉最常见的还是router的使用

1.  import Vue from 'vue';
2.  import VueRouter from 'vue-router';

3.  Vue.use(VueRouter);

之后便可以使用VueRouter创建路由对象了

自己创建一个小插件

为了方便下文源码分析，这里自己建立一个小小小小插件

1，在vue脚手架中建立如下的结构

2，loading.vue中建立一个简单的结构

3，在index.js中引入vue组件

这里的install是vue.use要求的，等下源码分析能看到

4,最后导入main.js中使用

5，最终网页的显示结果

Vue.use 源码分析

打开vue源码找到vue.use

1 Vue.use = function (plugin) {
2      var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
3      if (installedPlugins.indexOf(plugin) > -1) {
4        return this
5      }
6
7      // additional parameters
8      var args = toArray(arguments, 1);
9      args.unshift(this);
10      if (typeof plugin.install === 'function') {
11        plugin.install.apply(plugin, args);
12      } else if (typeof plugin === 'function') {
13        plugin.apply(null, args);
14      }
15      installedPlugins.push(plugin);
16      return this
17    };

具体分析

1，其中plugin是导入的对象，包含install方法

2，第二行表示之前是否引入过组件，其中this指向vue

3，if (installedPlugins.indexOf(plugin) > -1) { return this }查找之前是否创建过相同组件，创建过及跳过下面代码

4，toArray是vue自己定义的函数

  function toArray (list, start) {
    start = start || 0;
    var i = list.length - start;
    var ret = new Array(i);
    while (i--) {
      ret[i] = list[i + start];
    }
    return ret
  }

在use中的作用是将组件plugin以外的参数放到数组args中并把vue对象放到数组第一位

5，判断plugin是否包含install函数，是的话将args数组当作参数传给install，并使用apply方法将this指向plugin，执行install函数。如果plugin不包含install则判断plugin本身是不是函数，并执行

if (typeof plugin.install === 'function') { 11 plugin.install.apply(plugin, args); 12 } else if (typeof plugin === 'function') { 13 plugin.apply(null, args); 14 }

6，最后再将plugin名放到installedPlugins中，表示已经创建过这个组件之后便可以在自己的文件中使用这个组件了

Vue 中Vue.use()的使用场景及其源码分析