Vue2.0源码解析 - 知其然知其所以然之Vue.use

前言

小伙伴们大家好。用过Vue的小伙伴都知道，在我们进行Vue开发时，避免不了会使用一些第三方的库，比如说ElementUI组件库。当我们导入好这些组件库后会执行一个Vue.use函数，然后把导进来的组件库作为参数传给该函数。这样就可以在任何页面中都可以随意的使用组件库中的各种组件了。
如果不去执行Vue.use函数，那么即使组件库被导进来，那么内部的组件还是无法使用的。小伙伴们有没有想过这是为什么呐，Vue.use函数的原理又是什么呢，在它的内部都做了什么？接下来我们就为大家来一一解答。

Vue.use的使用

下面我们还是以ElementUI组件库为例来简单回顾一下Vue.use的使用，看下面代码：

import {
     ElementUI} from 'element-ui';
Vue.use(ElementUI);

<div>
	<el-button type='primary'>按钮el-button>
div>

上面只是简单的两句代码就可以使用elementui内部的所有组件了。我们知道如果想要在一个页面中使用其它组件，那么必须要用Vue.component或components对目标组件进行一个全局或局部的注册，这样才能使用。但在上面的代码中只有一个import和一个Vue.use，没有看到任何组件注册的代码，而import又仅仅起到导入的作用，所以断定一定就是Vue.use函数起了作用了。

Vue.use解密

首先我们来看下Vue2.0中关于Vue.use的官方源码，路径：src/core/global-api/use.js。use的源码非常简单总共加起来还不到20行，下面我们一起来看下：

/* @flow */

import {
      toArray } from '../util/index'

export function initUse(Vue: GlobalAPI) {
     
	Vue.use = function (plugin: Function | Object){
     
		const initalledPlugins = (this._installedPlugins || (this._installedPlugins = []))
		if (installedPlugins.indexOf(plugin) > -1) {
     
			return this
		}
	
		// additional parameters
		const args = toArray(arguments, 1)
		args.unshift(this)
		if (typeof plugin.install === 'function') {
     
			plugin.install.apply(plugin, args)
		}else if(typeof plugin === 'function') {
     
			plugin.apply(null, args)
		}
		installedPlugins.push(plugin)
		return this
	}
}

看了代码是不是很简单，其中最核心的代码是后面一段中的if和else if这几句，下面来逐行解读一下。

• 首先use是Vue上的一个静态函数，它接收一个函数或对象类型的参数plugin
• _installedPlugins 是Vue实例上的一个数组类型的属性，它里面存放的是所有已经注册过的组件（插件），在注册之前要先检查一下，当前组件是不是已经被注册，如果已经注册过了则直接返回。
• 调用toArray方法将类数组arguments转换为真正的数组，并将this（指向Vue）插入到数组中的第一个位置
• 判断plugin对象中是否存在install属性，如果存在install并且install是一个function，则让install执行并将args参数传给它
• 如果plugin本身就是一个函数则直接执行这个函数并传递args参数
• 最后组件注册成功，添加到installedPlugins列表中，避免重复注册，然后返回当前this（Vue）

其中核心所在就是执行Vue.use时，其实执行的是传给use的plugin或plugin.install函数。而对于组件来说将其注册成为全局组件就是在plugin或plugin.install函数中进行的。
感兴趣的小伙伴可以看下ElementUI的源码，其中在导出的默认对象中就有一个install函数，而在install函数中对所有组件进行了循环注册。

总结

本文我们对Vue.use源码进行了详细解读，现在小伙伴们应该知道为什么通过Vue.use可以注册全局组件了吧。其实如此看来Vue.use不仅仅可以用来注册组件还可以做一些其它的事情，只要传给use的是一个函数或是一个带有install函数的对象都是可以的，然后将我们需要处理的逻辑写在函数体了就可以了。
好了本文就到这里了，喜欢的小伙伴欢迎点赞留言加关注哦！