Vue中使用Vue.use注册全局插件-组件、指令、过滤器等

在Vue项目中我们往往会用到功用组件，使用在不同层次、不同地方的的组件，以至于我们每次都会去
import组件并且使用components注册，如果是两个三个还能接受，但是比如element-ui框架中el-button
这样的组件使用频率是非常的高，那就非常繁琐。Vue官方文档中给我们提供了在main.js中使用Vue.component()
的方式注册全局组件，这样是很好的，但是在我看来不算优雅；当我们的全局组件很多的时候，代码组织
就不那么漂亮了。

• 在这里我推荐使用Vue.use()的方式注册全局组件，如下：

component.js

import HelloWord from '@/components/HelloWord'
export default (Vue) => {
  Vue.component('HelloWord', HelloWord)
}

main.js

import Vue from 'vue'
import component from '@/plugin/component'
Vue.use(component)

这样我们就可以在组件中随意的使用HelloWord组件了

我们再来看看Vue.use()都做了什么？
贴一下源码

import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
	// 首先先判断插件plugin是否是对象或者函数：
	Vue.use = function (plugin: Function | Object) {
		const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
		// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
		if (installedPlugins.indexOf(plugin) > -1) {
			return this
		}
		
		// 取vue.use参数,toArray() 方法代码在下一个代码块
		const args = toArray(arguments, 1)
		args.unshift(this)
		// 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。
		if (typeof plugin.install === 'function') {
			plugin.install.apply(plugin, args)
		} else if (typeof plugin === 'function') {
			plugin.apply(null, args)
		}
		installedPlugins.push(plugin)
		return this
	}
}

// toArray 方法源码
export function toArray (list: any, start?: number): Array {
	start = start || 0
	let i = list.length - start
	const ret: Array = new Array(i)
	while (i--) {
		ret[i] = list[i + start]
	}
	return ret
}

Vue.use()函数第一个参数支持一个函数或者对象，但是为对象时，对象中需要包含install函数，返回
的是this，指向的就是传递进来的Vue，这样就可以使用链式调用use()，由此我们就可以使用use函数去
创建全局的指令、过滤器等等。