用法
在我的项目中咱们常常应用到 Vue.use,比方 Vue.use(ElementUI),Vue.use(vueRouter), 那么咱们来看一看 Vue 的应用办法。
Vue.use 接管的是一个函数或者是一个对象,如果曾经注册过此插件了那么就不会再进行注册
1. 如果传进来的是对象的话,这个对象外面蕴含一个 install 办法那么间接让 install 这个函数执行并且将这个对象作为 install 中的 this 让 install 执行,而后将 Vue 和其余定义的参数作为参数传递给 install 函数
let a ={install(Vue,a,b){console.log(Vue,a,b,this);
}
}
Vue.use(a,1,2)
2. 如果传进来的是函数的话那么间接让这个函数执行,并且让 null 作为这个函数的 this(也就是将 window 作为这个函数的 this),而后将 Vue 和其余定义的参数作为参数传递给 install 函数
function a(Vue,a,b){console.log(Vue,a,b,this);
}
Vue.use(a,1,2)
Vue.use 源码
import {toArray} from '../util/index'
export function initUse (Vue: GlobalAPI) {
// 承受的是函数或者对象
Vue.use = function (plugin: Function | Object) {const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
//installedPlugins 缓存机制,如果存在那么间接 return
if (installedPlugins.indexOf(plugin) > -1) {return this}
// 将传进来的自定义参数转换成数组
const args = toArray(arguments, 1)
// 将 Vue 当做第一个参数,比方 install(Vue) 这里能间接能拿到 Vue
args.unshift(this)
// 如果是对象的话,外面会有一个 install 函数
if (typeof plugin.install === 'function') {
// 间接执行并将这个对象作为函数的 this, 并将参数传过来
plugin.install.apply(plugin, args)
// 如果传进来的是一个函数的话
} else if (typeof plugin === 'function') {
// 间接执行并将 null 作为函数的 this, 并将参数传过来
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}