以 Vue.use(VueRouter)为例,Vue.use执行了什么?
相关代码在 vue/src/core/global-api/use.js
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
const args = toArray(arguments, 1) // 获取额外的入参,例如Vue.use(VueRouter,20),这里的args =[20]
args.unshift(this) //往args头部插入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全局里维护了一个_installedPlugins数组,它存储所有注册过的 plugin,这里首先判断数组里存不存在该插件,存在就直接返回,程序终止(防止重复注册同一个组件)。否则判断plugin.install是不是一个function,是的话执行plugin.install(),然后将该插件丢入全局_installedPlugins数组中。
结论:
Vue.use(VueRouter)实际上就是执行了VueRouter的install方法。