Vue.use源码解析

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
}
解析:
  • const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
    首先检查是否存在this._installedPlugins,如果存在则赋值给installedPlugins,否则将创建一个空数组并赋值给this._installedPlugins和installedPlugins。

  • if (installedPlugins.indexOf(plugin) > -1) { return this }
    检查插件是否已经安装过,如果已经安装过,则直接返回Vue实例。这避免了重复安装同一个插件。

  • const args = toArray(arguments, 1)
    这里调用了toArray方法,将arguments对象从索引1开始转换为一个真正的数组,并将结果赋值给args

  • args.unshift(this)
    在args数组的开头添加this,也就是Vue实例自身。这是为了在调用插件的install方法或插件本身时传递Vue实例作为第一个参数。

  • if (isFunction(plugin.install)) { plugin.install.apply(plugin, args) }
    如果插件具有install方法,就调用这个方法。这是Vue插件的约定,install方法会接收Vue实例和一些其他参数。通过apply将args数组作为参数传递给install方法。

  • else if (isFunction(plugin)) { plugin.apply(null, args) }
    如果插件本身是一个函数而不是一个包含install方法的对象,就直接调用这个函数,并传递args数组作为参数。

  • installedPlugins.push(plugin)
    将插件添加到installedPlugins数组,以记录已安装的插件。

  • return this
    返回Vue实例,以支持链式调用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容