Vue.use与Vue.prototype的区别
本人对Vue的原型prototype有了解过,知道这是啥玩意，但对于Vue.use只知会用，却不知其意。今天来看看。
示例
// 引入公共方法扩展
import common from '@/prototypeEx/common.js'
Vue.prototype.common = common
// 引入公共缓存方法
import cacheEx from '@/prototypeEx/cacheEx.js'
Vue.prototype.cacheEx = cacheEx
// 引入大数据展示 插件
const echarts = require('echarts')
Vue.prototype.$echarts = echarts
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
// 引人自己封装的全局注册的公共组件
import ztable from '@/components/index.js'
Vue.use(ztable)解答(本人看完豁然开朗)
Vue.use和Vue.prototype没有本质区别，Vue.use就是在Vue.prototype基础上又封装了一层而已，他们实现的原理都是在Vue.prototype上添加了一个方法，Vue.prototype适合于注册Vue生态外的插件，Vue.use适合于注册Vue生态内的插件。
分析过程
1.$echarts变量前加上$，是防止被组件中的变量意外覆盖。
vue.use源码
Vue.use = function (plugin) {
if (plugin.installed) {
return;
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else {
plugin.apply(null, args);
}
plugin.installed = true;
return this;
};
再来看一下一个插件的install方法内容， 我们居然看到了Vue.prototype.$toast = toast;,
// 准备好 install 方法 给 Vue.use() 使用
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
// 将包装好的 toast 挂到Vue的原型上，作为 Vue 实例上的方法
Vue.prototype.$toast = toast;
}小结：
看了源码才知道原来`Vue.use`主要是执行`install`方法，而`install`主要也是执行`Vue.prototype`方法。
所以，其实`Vue.use()`方法的核心就是`Vue.prototype`，只不过又封装了一层,更加的灵活，扩展性更好。
### 总结 把vue理解成一棵树，`Vue.use`和`Vue.prototype`都是在这颗树上挂载插件的方式，不同之处是使用`vue.prototype`，插件不需要实现`install`方法，简单粗暴，拿来就用，但是灵活性不如`Vue.use()`, 而`Vue.use()`，却要求插件必须实现`instal`方法或者该插件本身就是函数，在`install`方法可以完成自己的逻辑， 所以`Vue.use()`的方式更加的强大，灵活，扩展性更好。
但是两者并没有高低之分， 只是有着各自的应用场景，`Vue.prototype`适合于非Vue生态的插件，而`Vue.use()`适合于Vue生态内的插件，如echarts,两者互相配合，一个简单实用，一个灵活扩展性好。而且，`Vue.use`的实现依赖于`Vue.prototype`，最本质的理解就是`Vue.use`包裹着`Vue.prototype`进一步的封装了一次。
关于Vue.prototype和Vue.use()的疑问
问题描述
在 main.js 文件中，通过 Vue.prototype 和 Vue.use() 两种方式注册插件有什么不同呢？
每一个Vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。
Vue.use() 相当于使用一个中间件，用于注册第三方库。
// 在组件中，通过 this.$post 来使用方法
import request from 'utils/request'
Vue.prototype.$post = request.post
import Antd from 'ant-design-vue'
import db from 'utils/localstorage'
Vue.use(Antd)
Vue.use({
install (Vue) {
Vue.prototype.$db = db
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')首先，不管你采用哪种方式，最终实现的调用方式都是
vm.api()也就是说，两种方法，实现的原理都是在Vue.prototype上添加了一个方法。所以结论是“没有区别”。
再来说说Vue.use()到底干了什么。
我们知道，Vue.use()可以让我们安装一个自定义的Vue插件。为此，我们需要声明一个install函数
// 创建一个简单的插件 say.js
var install = function(Vue) {
if (install.installed) return // 如果已经注册过了，就跳过
install.installed = true
Object.defineProperties(Vue.prototype, {
$say: {
value: function() {console.log('I am a plugin')}
}
})
}
module.exports = install然后我们要注册这个插件
import say from './say.js'
import Vue from 'vue'
Vue.use(say)这样，在每个Vue的实例里我们都能调用say方法了。
我们来看Vue.use方法内部是怎么实现的
Vue.use = function (plugin) {
if (plugin.installed) {
return;
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else {
plugin.apply(null, args);
}
plugin.installed = true;
return this;
};其实也就是调用了这个install方法而已。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
