Vue.use與Vue.prototype的區(qū)別及說明

更新時間：2022年12月07日 16:55:18 作者：如花菇涼

這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue.use與Vue.prototype的區(qū)別

本人對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沒有本質區(qū)別，Vue.use就是在Vue.prototype基礎上又封裝了一層而已，他們實現的原理都是在Vue.prototype上添加了一個方法，Vue.prototype適合于注冊Vue生態(tài)外的插件，Vue.use適合于注冊Vue生態(tài)內的插件。

分析過程

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`主要是執(zhí)行`install`方法，而`install`主要也是執(zhí)行`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生態(tài)的插件，而`Vue.use()`適合于Vue生態(tài)內的插件，如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上添加了一個方法。所以結論是“沒有區(qū)別”。

再來說說Vue.use()到底干了什么。

我們知道，Vue.use()可以讓我們安裝一個自定義的Vue插件。為此，我們需要聲明一個install函數

// 創(chuàng)建一個簡單的插件 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方法而已。