Vue.use() 的使用和基本原理

Vue.use() 在 vue 中使用很多，比如 ElementUI，Router，Vuex 等组件在引用后都会使用 Vue.use 将他们传入作为参数使用，今天记录一下 Vue.use 的用法

先看一下官方给的文档说明

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入。
也就是说：

1. 参数为函数时，函数的参数是Vue对象
2. 参数为对象时，它提供的install方法中参数是Vue对象

所以可以进行以下尝试

1.首先是参数为函数时

// 新建一个 demo.js ，尝试参数为函数时 Vue.use() 的情况 ，demo.js文件内容如下
function demo (Vue){
    console.log('fn', Vue)
}

export default demo

// 之后在main.js引入demo.js，并且使用 Vue.use() 调用
import demo from '@/components/demo.js'
Vue.use(demo)

查看控制台输出以下结果

2.接下来是参数为对象时

// 新建一个 demo.js ，尝试参数为对象时 Vue.use() 的情况 ，demo.js文件内容如下
const demo = {
	// 参数为对象时，需要提供install方法
    install: (Vue) => {
        console.log('obj', Vue)
    }
}

export default demo

// 之后在main.js引入demo.js，并且使用 Vue.use() 调用
import demo from '@/components/demo.js'
Vue.use(demo)

查看控制台输出以下结果

除了默认的参数 Vue 以外，还可以按需要传入自定义参数，如（两种方式都可以，这里拿参数为对象形式举例）

const demo = {
    install: (Vue,a,b,c) => {
        console.log('obj', Vue,a,b,c)
    }
}
export default demo

// 在main.js引入demo.js，并且使用 Vue.use() 调用
import demo from '@/components/demo.js'
Vue.use(demo，1,2,{name:'小明'})

控制台结果

所以这就是Vue.use的基础用法了，在Vue.use中可以进行一些自定义操作，如注册组件：

/*****************************************组件代码*******************************************/
<template>
    <div id="haha">
        1231312213 demo 哈哈哈
    </div>
</template>
<script>
export default {
    name: 'haha'
}
</script>
/*********************************Vue.use() 使用的demo.js文件代码******************************/
import haha from '@/components/haha'
const demo = {
    install: (Vue) => {
    	Vue.component('haha', haha)
    }
}
export default demo

/*********************************main.js 调用 Vue.use 的代码*********************************/
// 在引入demo.js，并且使用 Vue.use() 调用
import demo from '@/components/demo.js'
Vue.use(demo)

// 完成之后，就可以在页面中直接使用组件了

除了组件之外，还可以进行注册一些自定义指令或者过滤器之类的操作，功能按需求自己定义，使用方式就先这样了

---

---

关于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<any> {
	start = start || 0
	let i = list.length - start
	const ret: Array<any> = new Array(i)
	while (i--) {
		ret[i] = list[i + start]
	}
	return ret
}