用vue开发的一定对Vue.use不陌生,在引入一些插件的时候经常需要在main里面用到这个语法。
不知道有没有人想过为什么有些插件需要用Vue.use才能用,有些直接使用。一般我们都是按照插件的使用方法直接用了,很少去想为什么。今天参考简书学习了一下。
先上一波简书上Vue.use官方源码:
export function initUse(Vue: GlobalAPI) {
Vue.use = function (plugin: Function| Object) {
// 限制了自定义组建的类型
const installedPlugins =(this._installedPlugins || (this._installedPlugins =
[]))
//保存注册组件的数组,不存在及创建
if(installedPlugins.indexOf(plugin) > -1) {
//判断该组件是否注册过,存在returnVue对象
return this
}
//调用`toArray`方法
const args = toArray(arguments,1)
args.unshift(this)
//将Vue对象拼接到数组头部
if (typeof plugin.install ==='function') {
//如果组件是对象,且提供install方法,调用install方法将参数数组传入,改变`this`指针为该组件
plugin.install.apply(plugin,args)
} else if (typeof plugin ==='function') {
//如果传入组件是函数,这直接调用,但是此时的`this`指针只想为`null`
plugin.apply(null, args)
}
//在保存注册组件的数组中添加
installedPlugins.push(plugin)
return this
}
}
toArray
方法源码
export function toArray (list: any, start?:number): Array<any> {
start = start || 0
leti = list.length - start
//将存放参数的数组转为数组,并除去第一个参数(该组件)
const ret: Array<any> = new Array(i)
//循环拿出数组
while (i--) {
ret[i] = list[i + start]
}
return ret
}
作者:茶树菇小学生 链接:https://www.jianshu.com/p/710fbbff15ba 來源:简书
已经解释的很清楚了,简单来说,当我们封装的插件是这样的:
export const testObj = {
install(Vue, arg) {
}
}
有install方法,那么就要使用Vue.use去初始化这个插件。这样写的好处就是插件需要一开始调用的方法都封装在install里面,更加精简和可拓展性更高。
如果封装的插件是靠这个对象去调用方法,比如axios,那么直接用的就是export default暴露出一个对象,那么就不需要使用Vue.use。
两者刚好让我们知道,如果一个插件是必须全部引入,那么使用暴露一整个对象,使用exportdefault或者是暴露一个用install的对象使用Vue.use。而像UI库那么庞大的插件,我们一般按需引入,那么就使用一个一个export的方法,使用花括号{}按需引入。
(完)