[Vue源码分析]Vue.use实现原理

最近小组有个关于vue源码分析的分享会，提前准备一下…

前言：
插件通常会为 Vue 添加全局功能，这个官网文档有说过了，如果对插件不了解，建议先阅读一下官网文档：https://cn.vuejs.org/v2/guide/plugins.html#使用插件

使用插件

插件的使用很简单，使用Vue.use注册后即可全局使用，比如项目中需要用到vue-router这个插件，如图引用即可：

接下来分析一下这个过程发生了什么。

Vue.use源码分析

Vue.use是通过initUse这个方法初始化的，方法如图：

①：Vue.use接受一个参数plugin，方法检测了installedPlugins这个数组中是否已经包含想要注册的组件，可知插件只允许被注册一次，二次注册是无效的。
②：调用toArray将转入的参数转换成数组，toArray源码如图：

③：把当前Vue对象this插入转化后的数组前
④：判断plugin中install是否是一个方法，如果是，则传入plugin及转化后的数组；此外，如果plugin本身就是一个方法，则传入转化后的数组，随后执行这个方法，由此可知Vue.use(插件)实际上会调用插件的install方法，并且调用use的时候是可以传参数的。
注：以上还可以知道，vue只会对plugin中的两种情况处理，即要么plugin中有install函数，要么plugin本身就是一个函数。
⑤：将注册后的插件推进installedPlugins，避免重复注册，返回当前实例，代码执行结束。

验证一下

（一）插件包含install方法的情况
（1）vue init一个HelloWorld工程，创建一个插件，命名plugin.js，如下如图：

以上插件输出了一下Vue.use()时传入的各个参数，随后给全局注册了一个myAdd方法。
（2）引用此插件

（3）引用已经注册的myAdd方法

（4）浏览器看结果

以下为install中console.log的输出，可见第一个参数为Vue实例，与上边源码分析一致。

（二）插件本身为方法的情况
如图，创建plugin1.js，使用方法跟上边的例子一样，结果也是一样的，大家可以根据自己的喜好选择对应的方式。

注：往参数数组前插入当前vue对象的目的在于这样之后开发插件时就不用单独引入Vue了，减少了包体积，属于一种优化。如上，如果没有这样做的话，上边的插件例子就需要import Vue from 'vue'，而不是直接使用vue，(注意：vue是传进来的参数，只不过我知道那个是vue实例，所以写成了vue)。