Vue.js探讨第二站-Vue.use()

主要背景

平常在项目中使用的Vue.use(vueRouter)、Vue.use(vuex)，当时的我只要项目可以跑起来即可，没有深入探究原理，说白了，自己也懒，不想去钻研。

近期，工作上的技术栈也稳定下来了，vue，也想好好的去探究vue的底层原理，到底实现了什么，让我在平时项目中用到的如此的舒服。

Vue.use源码

Vue.use = function (plugin: Function | any) {
    const installedPlugins =
      this._installedPlugins || (this._installedPlugins = [])
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (isFunction(plugin.install)) {
      plugin.install.apply(plugin, args)
    } else if (isFunction(plugin)) {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
}

代码量真的很少，但是对于我来说，很博大精深的感觉，创作者思路很清晰，应用很巧妙。就拿plugin.install.apply(plugin, args)来说，我们肯定都知道apply方法，但是在实际应用又有多少人用了？多少场景用到了？看源码绝不是为了装13，学习大牛们的先进思想和代码结构，有助于我们提升自己的视野，深度也会有所加深，可能目前没有有什么明显变化，那就坚持吧。

话不多说，直接上解释

代码解释

函数入参：plugins 就是一个插件，平常项目中用的vuex、vueRouter就是的

插件检查：

// 定义installedPlugins变量
// 不存在的话 初始化数据为空数组[]
const installedPlugins =
      this._installedPlugins || (this._installedPlugins = [])
      
// 检测当前插件是否已经注册过了
if (installedPlugins.indexOf(plugin) > -1) {
  // 如果注册过了，直接返回this
  // this指什么？use方法是哪个对象在调用？
  // 当时vue
  return this
}

执行install方法

// 将arguments类数组转为数组
const args = toArray(arguments, 1)
// 将vue对象添加到args数组的第一个
args.unshift(this)
// 检测传入进来的对象上有install属性并且是一个函数
if (isFunction(plugin.install)) {
  // 执行当前对象上的install方法
  plugin.install.apply(plugin, args)
} else if (isFunction(plugin)) {
  // 如果插件就是一个函数 调用插件本身
  plugin.apply(null, args)
}

// 当前插件添加进 installedPlugins 数组
installedPlugins.push(plugin)
// 返回vue实例
return this

所以

为什么插件不能重复注册了？恍然大悟了

为什么插件的install方法第一个参数都是Vue？args.unshift(this)是Vue传递过来的