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的方法，使用花括号{}按需引入。

欢迎关注Coding个人笔记 公众号