Vue.use 源码详解

话不多说，直接进入主题。

介绍：使用 Vue 来注册要使用的插件，像 vuex，vue-router 等。

1.使用 use

我们经常像如下这样来使用use，我们只知道应该这么做，但是你有没有想过，use中到底发生了什么？

new Vue(options).use(vuex).use(VueRouter)

2. 使用 use 实现了什么功能？

• Vue.use(vuex)
  该方法为每一个 vm 实例中都添加了一个属性$store,用来管理全局 state

• Vue.use(VueRouter)
  执行此方法，为 vm 实例上挂载了两个全局组件，<router-link>和<router-view>, 并在Vue根部添加了router属性。

3. 如何实现？

我们思考一下，想要给 Vue上添加属性只需要拿到Vue对Vue进行操作就可以了，但是这个过程应该放在哪呢？难道是在use中直接进行吗？那如果安装的插件多了的话，use会变得多么庞大，显然这不符合理念，既然不能在use中执行，那我们可以尝试在将Vue拿出来为其添加。确实是这样，我们来看下Vue中是怎么做的。

  Vue.use = function (plugin: Function | Object) {
  // plugin 插件一般来说是一个实例对象
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 创建一个数组，用来存储已经安装的插件，避免重复安装
    if (installedPlugins.indexOf(plugin) > -1) { // 此处进行判断，如果已经安装，直接返回
      return this
    }
    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this) // 将this也就是Vue添加的数组中的最前边
    if (typeof plugin.install === 'function') { // 执行插件的 install 方法，将Vue拿到插件中
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin) // 将安装好的插件放入数组中保存起来
    return this
  }

上述代码非常容易理解，调用插件的 install方法，将Vue拿到对应插件中执行对应的处理，为Vue添加合适的扩展属性和功能。

4. 结尾

这就是一个成熟框架的强大之处，留下接口可供用户随意扩展，添加相应的功能，让其功能更加丰富。。