Vue中使用Vue.use的实现

前端开发 / 无意间创建于 4年前 / 阅读数 830 / 评论数 1 / 1秒前

我们在使用Vue的过程中一定都使用过Vue.use(xxx) 这种语法,那么Vue.use到底做了什么呢？
先上一段Vue.use的源码压压惊


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源码中Vue.use()这个方法的代码只有这些。
我们都知道use这个api是Vue中的一个全局api，而且从源码中我们可以看到，Vue.use实际上就是一个函数，并且这个函数接收的参数plugin 可以是一个函数或是一个对象。函数内部定义了一个常量 installedPlugins 。这个installedPlugins的作用是对数组进行保留，在没有this._installedPlugins的情况下, 是一个空数组，如果数组中有内容则保留，避免在调用use函数后反复进行注册的的情况


 const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

这一段代码的作用就是为了保证插件只注册一次


 const args = toArray(arguments, 1)
    args.unshift(this)

这段代码的作用是获取传入参数除了plugin之外的所有参数，并且将this插入参数数组中的第一个(这里的this就是Vue)，这样做的话，插件内部就可以直接获取到Vue了并不用在插件内部单独在引入Vue...

  if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)

接下来这里会判断plugin.install 是否是一个函数如果是则执行并且将参数传入，如果plugin本身就是一个函数，则直接执行
最后将参数plugin(插件) 存放到installedPlugins这个数组中

总结： Vue.use() 函数实际上就是执行了插件的install方法，短小而精悍。

讨论数量: 1

希芒

棒棒哒呵呵

4年前