共计 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
}
正文完