在Vue中通过Vueuse注册全局组件的原理

7次阅读

共计 1188 个字符,预计需要花费 3 分钟才能阅读完成。

首先看官方文档对 Vue.use 的使用说明

将插件注册到 Vue 对象上,而且只能注册一次。这就十分类似于单例模式,但不是严格意义上的单例模式。
单例模式强调一个类只能够实例化一个对象,类和对象的数量关系应该是 1:N。但是通过单例模式创建的对象和它的类之间却是 1:1 的关系。这里之所以说 Vue.use 使用了单例模式的设计理念,是因为组件在 Vue 上只被允许注册一次。

源码

  Vue.use = function (plugin: Function | Object) {

    // 首先检查 Vue 对象当前的_installedPlugins 属性是否存在,// 如果存在,那就去判断已经注册的组件中是否包含即将要注册的组件。// 如果是,那么直接结束,不用继续往下执行。附带说一下。在条件不满足的情况下,//Vue.use 返回的不是 null,而是 this。注意我们是在 Vue.use 方法中使用 this,因此 this 指向 Vue。// 返回 this 可以使用链式调用。const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {return this}

    // 每一个函数默认都有一个 arguments 参数,我们可以以数组下标的方式(arguments[0]),访问其中的参数
    // 但是 arguments 并不是一个数组。但是接下来我们希望通过 apply 的方式将 Vue.use 的参数转嫁给 plugin 函 
    // 数 plugin.install 或者 plugin 函数,因此必须将 arguments 转换成真正的数组,因为 apply 接收数组。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 当中。// 下一次重复注册的时候就直接返回。installedPlugins.push(plugin)
    return this
  }

辅助函数
/**
 * 将类似于数组的对象转换成数组对象。*/
export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {ret[i] = list[i + start]
  }
  return ret
}

正文完
 0