Vue.use()
用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的方法，使用花括号{}按需引入。
（完）
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-10-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读