快捷導(dǎo)航

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

更新時(shí)間：2022年12月07日 16:55:18 作者：如花菇?jīng)?

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

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

本人對(duì)Vue的原型prototype有了解過,知道這是啥玩意，但對(duì)于Vue.use只知會(huì)用，卻不知其意。今天來看看。

示例

// 引入公共方法擴(kuò)展
import common from '@/prototypeEx/common.js'
Vue.prototype.common = common
// 引入公共緩存方法
import cacheEx from '@/prototypeEx/cacheEx.js'
Vue.prototype.cacheEx = cacheEx
// 引入大數(shù)據(jù)展示 插件
const echarts = require('echarts')
Vue.prototype.$echarts = echarts
?
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
// 引人自己封裝的全局注冊(cè)的公共組件
import ztable from '@/components/index.js'
Vue.use(ztable)

解答(本人看完豁然開朗)

Vue.use和Vue.prototype沒有本質(zhì)區(qū)別，Vue.use就是在Vue.prototype基礎(chǔ)上又封裝了一層而已，他們實(shí)現(xiàn)的原理都是在Vue.prototype上添加了一個(gè)方法，Vue.prototype適合于注冊(cè)Vue生態(tài)外的插件，Vue.use適合于注冊(cè)Vue生態(tài)內(nè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;
};
?
再來看一下一個(gè)插件的install方法內(nèi)容， 我們居然看到了Vue.prototype.$toast = toast;,
// 準(zhǔn)備好 install 方法 給 Vue.use() 使用
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
?
// 將包裝好的 toast 掛到Vue的原型上，作為 Vue 實(shí)例上的方法
Vue.prototype.$toast = toast;
}

小結(jié)：

看了源碼才知道原來`Vue.use`主要是執(zhí)行`install`方法，而`install`主要也是執(zhí)行`Vue.prototype`方法。

所以，其實(shí)`Vue.use()`方法的核心就是`Vue.prototype`，只不過又封裝了一層,更加的靈活，擴(kuò)展性更好。

### 總結(jié) 把vue理解成一棵樹，`Vue.use`和`Vue.prototype`都是在這顆樹上掛載插件的方式，不同之處是使用`vue.prototype`，插件不需要實(shí)現(xiàn)`install`方法，簡單粗暴，拿來就用，但是靈活性不如`Vue.use()`, 而`Vue.use()`，卻要求插件必須實(shí)現(xiàn)`instal`方法或者該插件本身就是函數(shù)，在`install`方法可以完成自己的邏輯，所以`Vue.use()`的方式更加的強(qiáng)大，靈活，擴(kuò)展性更好。

但是兩者并沒有高低之分，只是有著各自的應(yīng)用場景，`Vue.prototype`適合于非Vue生態(tài)的插件，而`Vue.use()`適合于Vue生態(tài)內(nèi)的插件，如echarts,兩者互相配合，一個(gè)簡單實(shí)用，一個(gè)靈活擴(kuò)展性好。而且，`Vue.use`的實(shí)現(xiàn)依賴于`Vue.prototype`，最本質(zhì)的理解就是`Vue.use`包裹著`Vue.prototype`進(jìn)一步的封裝了一次。

關(guān)于Vue.prototype和Vue.use()的疑問

問題描述

在 main.js 文件中，通過 Vue.prototype 和 Vue.use() 兩種方式注冊(cè)插件有什么不同呢？

每一個(gè)Vue組件都是Vue的實(shí)例，所以組件內(nèi)this可以拿到Vue.prototype上添加的屬性和方法。

Vue.use() 相當(dāng)于使用一個(gè)中間件，用于注冊(cè)第三方庫。

// 在組件中，通過 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')

首先，不管你采用哪種方式，最終實(shí)現(xiàn)的調(diào)用方式都是

vm.api()

也就是說，兩種方法，實(shí)現(xiàn)的原理都是在Vue.prototype上添加了一個(gè)方法。所以結(jié)論是“沒有區(qū)別”。

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

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

// 創(chuàng)建一個(gè)簡單的插件 say.js
var install = function(Vue) {
? if (install.installed) return // 如果已經(jīng)注冊(cè)過了，就跳過
? install.installed = true
?
? Object.defineProperties(Vue.prototype, {
? ? $say: {
? ? ? value: function() {console.log('I am a plugin')}
? ? }
? })
}
module.exports = install

然后我們要注冊(cè)這個(gè)插件

import say from './say.js'
import Vue from 'vue'
?
Vue.use(say)

這樣，在每個(gè)Vue的實(shí)例里我們都能調(diào)用say方法了。

我們來看Vue.use方法內(nèi)部是怎么實(shí)現(xiàn)的

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;
};

其實(shí)也就是調(diào)用了這個(gè)install方法而已。