Vue.use 和 Vue.prototype.xxx 的区别

Vue.use 和 Vue.prototype 两种方式都可以引入插件，它们都是将 插件挂载到 Vue 的实例上，这样我们就可以在全局使用这个插件了

1、Vue.use()
它的参数是{ object | Function }，如果参数是对象则必须提供 install 方法，如果参数是函数则将参数作为 install 方法，install 方法调用时会将 Vue 作为参数传入。Vue.use 会自动阻止多次引入相同插件，插件只会被安装一次。

创建一个 plugin.js 文件

let plug1 = {
	//第一个参数是Vue 构造器，第二个可选参数
	install(Vue,options){
		Vue.prototype.$fn1 = function(){
			console.log('这是插件1里面的方法');
		}
	}
}
function plug2(Vue,options){
	Vue.prototype.$fn2 = function(){
		console.log('这是插件2里面的方法');
	}
}

export { plug1, plug2 }

在 main.js 里面引入 plugin.js

import Vue from 'vue';
import App from './App.vue';
import { plug1, plug2 } from './plugin';

Vue.use(plug1);
Vue.use(plug2);

new Vue({
	el:'#app',
	render: h => h(App)
})

然后再任意一个页面里面使用

mounted(){
 	this.$fn1(); //这是插件1里面的方法
 	this.$fn2(); //这是插件2里面的方法
},

上面的案例将 一个方法，一个对象通过 Vue.use 挂载到 Vue 的实例上面，在其他页面直接可以用 this 来调用 plug1 和 plug2 里面定义的方法。

注意： Vue.use 方法必须在 new Vue() 之前被调用。

2、Vue.portotype.xxx
你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

export function plug2(){
	console.log('这是插件2里面的方法');
}

在main.js 里面引入

import Vue from 'vue';
import App from './App.vue';
import*as Plugin from './plugin';

Vue.prototype.$Plugin  = Plugin;

new Vue({
	el:'#app',
	render: h => h(App)
})

在页面里面使用的话

 this.$Plugin.plug2()
 //这是插件2里面的方法

这样 plug2 方法就可以在全局使用了，甚至在实例被创建之前就可以

总结： 在使用专门为 vue 写的插件时使用 Vue.use() 来引入，其它的用 Vue.prototype.xxx 来引入。

原文链接：https://blog.csdn.net/weixin_43299180/article/details/112240753