Vue.use的使用和基本原理

介绍与使用

Vue.use() （vue2.x是Vue.use,vue3.x是app.use）在 vue 中使用很多，比如 ElementUI, vantUI, VueI18n, Router, Vuex 等部分第三方库、组件、自定义方法等，在引用后会使用 Vue.use 将他们传入作为参数使用

如下：

1. vue2.x使用Vue.use()

   import Vue from 'vue';
   import App from './App';
   import router from './router';
   import store from './store';
   // 引入国际化插件
   import VueI18n from 'vue-i18n';
   // 引入统一配置
   import common from './lib/common';
   // 引入animate.css
   import animated from 'animate.css';
   
   Vue.use(animated);
   Vue.use(VueI18n); // 通过插件的形式挂载
   Vue.use(common); // 全局配置项
   
   /* eslint-disable no-new */
   // 把vue实例挂载在window.vm,方便使用vue的实例
   window.vm = new Vue({
     el: '#app',
     router,
     store,
     components: {
       App,
     },
     template: '',
   });
   
   

2. vue3.x使用app.use()

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   import vant from 'vant';
   import 'vant/lib/index.css';
   import globalFunction from './utils/globalFunction'; // 引入全局方法
   
   const app = createApp(App);
   
   app.use(vant);
   app.use(store);
   app.use(router);
   
   // 挂载全局方法
   for (const key in globalFunction) {
     app.provide(key, globalFunction[key]);
     console.log(key);
   }
   
   app.mount('#app');
   
   window.vm = app;
   
   

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

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

需要注意的是：通过Vue.use安装 Vue.js 插件，如果插件是一个对象，那么对象当Vue.use(插件)之后，插件的install方法会立即执行；如果插件是一个函数，当Vue.use(插件)之后，函数会被立即执行

也就是说：

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

所以可以进行以下尝试（以vue2.x的使用为例，3.x写法与2.x类似）：

1. 首先是 Vue.use参数为对象（插件为对象）时
   自定义一个demo文件：

   const demo = {
   	// 参数为对象时，需要提供install方法
       install: (Vue) => {
           console.log('自定义插件', Vue);
           // 定义一些vue中常用的全局方法
   		Vue.prototype.$Toast = () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用
   		Vue.prototype.$request = () => { console.log('全局request请求') }; // request请求,通过this.$request调用
       }
   }
   
   export default demo;
   

   main.js中通过Vue.use安装自定义的demo插件：

   import Vue from 'vue';
   import App from './App';
   import router from './router';
   import store from './store';
   
   import demo from './lib/demo';
   Vue.use(demo); // 安装自定义插件
   
   /* eslint-disable no-new */
   // 把vue实例挂载在window.vm,方便使用vue的实例
   window.vm = new Vue({
     el: '#app',
     router,
     store,
     components: {
       App,
     },
     template: '',
   });
   
   

2. 接下来是 Vue.use参数为函数（插件为函数）时
   自定义一个common文件：

   const common = (Vue) => {
     console.log('自定义插件', Vue);
     // 定义一些vue中常用的全局方法
     Vue.prototype.$Toast = () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用
     Vue.prototype.$request = () => { console.log('全局request请求') }; // request请求,通过this.$request调用
   };
   export default common;
   

   main.js中通过Vue.use安装自定义的common插件：

   import Vue from 'vue';
   import App from './App';
   import router from './router';
   import store from './store';
   
   import common from './lib/common';
   Vue.use(common); // 安装自定义插件
   
   /* eslint-disable no-new */
   // 把vue实例挂载在window.vm,方便使用vue的实例
   window.vm = new Vue({
     el: '#app',
     router,
     store,
     components: {
       App,
     },
     template: '',
   });
   
   

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

   自定义一个demo文件：

   const demo = {
   	// 参数为对象时，需要提供install方法
       install: (Vue, a, b, c) => {
           console.log('自定义插件', Vue, a, b, c);
           // 定义一些vue中常用的全局方法
   		Vue.prototype.$Toast = () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用
   		Vue.prototype.$request = () => { console.log('全局request请求') }; // request请求,通过this.$request调用
       }
   }
   
   export default demo;
   

   main.js中通过Vue.use安装自定义的demo插件：

   import Vue from 'vue';
   import App from './App';
   import router from './router';
   import store from './store';
   
   import demo from './lib/demo';
   Vue.use(demo, 1, 2, {name:'小明'}); // 安装自定义插件
   
   /* eslint-disable no-new */
   // 把vue实例挂载在window.vm,方便使用vue的实例
   window.vm = new Vue({
     el: '#app',
     router,
     store,
     components: {
       App,
     },
     template: '',
   });
   
   

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
}

文章参考：https://blog.csdn.net/weixin_43788115/article/details/103384064?spm=1001.2014.3001.5506