vue.use（plugin, arguments） 語法
參數(shù)：plugin(Function | Object)
用法：
如果vue安裝的組件類型必須為Function或者是Object
如果是個對象，必須提供install方法
如果是一個函數(shù)，會被直接當(dāng)作install函數(shù)執(zhí)行
install函數(shù)接受參數(shù)，默認第一個參數(shù)為Vue,其后參數(shù)為注冊組件時傳入的arguments
先舉個?
我們先來看一個簡單的事例
首先我使用官方腳手架新建一個項目vue init webpack vue-demo
然后我創(chuàng)建兩個文件index.js plugins.js.
我將這兩個文件放置在src/classes/vue-use目錄下
接下來對這兩個文件進行編寫
// 文件: src/classes/vue-use/plugins.jsconst Plugin1 = { install(a, b, c) { console.log('Plugin1 第一個參數(shù):', a); console.log('Plugin1 第二個參數(shù):', b); console.log('Plugin1 第三個參數(shù):', c); },};function Plugin2(a, b, c) { console.log('Plugin2 第一個參數(shù):', a); console.log('Plugin2 第二個參數(shù):', b); console.log('Plugin2 第三個參數(shù):', c);}export { Plugin1, Plugin2 };// 文件: src/classes/vue-use/index.jsimport Vue from 'vue';import { Plugin1, Plugin2 } from './plugins';Vue.use(Plugin1, '參數(shù)1', '參數(shù)2');Vue.use(Plugin2, '參數(shù)A', '參數(shù)B');然后我們在入口文件main.js引用這段代碼
// 文件: src/main.jsimport Vue from 'vue';import '@/classes/vue-use';import App from './App';import router from './router';Vue.config.productionTip = false;/* eslint-disable no-new */new Vue({ el: '#app', router, render: h => h(App),});此時我們執(zhí)行npm run dev打開8080端口開啟開發(fā)調(diào)試工具可以看到控制臺輸出以下信息
...]
從中可以發(fā)現(xiàn)我們在plugin1中的install方法編寫的三個console都打印出來，第一個打印出來的是Vue對象，第二個跟第三個是我們傳入的兩個參數(shù)。
而plugin2沒有install方法，它本身就是一個方法，也能打印三個參數(shù)，第一個是Vue對象，第二個跟第三個也是我們傳入的兩個參數(shù)。
那么現(xiàn)在我們是不是大概對Vue.use有一個模糊的猜想～
分析源碼
好我們還是不要猜想，直接上源碼
// Vue源碼文件路徑：src/core/global-api/use.jsimport { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }}從源碼中我們可以發(fā)現(xiàn)vue首先判斷這個插件是否被注冊過，不允許重復(fù)注冊。
并且接收的plugin參數(shù)的限制是Function | Object兩種類型。
對于這兩種類型有不同的處理。
首先將我們傳入的參數(shù)整理成數(shù)組 => const args = toArray(arguments, 1)。
(toArray源碼)
// Vue源碼文件路徑：src/core/shared/util.jsexport 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}再將Vue對象添加到這個數(shù)組的起始位置args.unshift(this),這里的this 指向Vue對象
如果我們傳入的plugin(Vue.use的第一個參數(shù))的install是一個方法。也就是說如果我們傳入一個對象，對象中包含install方法，那么我們就調(diào)用這個plugin的install方法并將整理好的數(shù)組當(dāng)成參數(shù)傳入install方法中。 => plugin.install.apply(plugin, args)
如果我們傳入的plugin就是一個函數(shù),那么我們就直接調(diào)用這個函數(shù)并將整理好的數(shù)組當(dāng)成參數(shù)傳入。 => plugin.apply(null, args)
之后給這個插件添加至已經(jīng)添加過的插件數(shù)組中，標(biāo)示已經(jīng)注冊過 => installedPlugins.push(plugin)
最后返回Vue對象。
小結(jié)
通過以上分析我們可以知道，在我們以后編寫插件的時候可以有兩種方式。
一種是將這個插件的邏輯封裝成一個對象最后將最后在install編寫業(yè)務(wù)代碼暴露給Vue對象。這樣做的好處是可以添加任意參數(shù)在這個對象上方便將install函數(shù)封裝得更加精簡，可拓展性也比較高。
還有一種則是將所有邏輯都編寫成一個函數(shù)暴露給Vue。
其實兩種方法原理都一樣，無非第二種就是將這個插件直接當(dāng)成install函數(shù)來處理。
個人覺得第一種方式比較合理。
舉個?
export const Plugin = { install(Vue) { Vue.component... Vue.mixins... Vue... // 我們也可以在install里面執(zhí)行其他函數(shù)，Vue會將this指向我們的插件 console.log(this) // {install: ...,utils: ...} this.utils(Vue) // 執(zhí)行utils函數(shù) console.log(this.COUNT) // 0 }, utils(Vue) { Vue... console.log(Vue) // Vue }, COUNT: 0 }// 我們可以在這個對象上添加參數(shù)，最終Vue只會執(zhí)行install方法，而其他方法可以作為封裝install方法的輔助函數(shù)const test = 'test'export function Plugin2(Vue) { Vue... console.log(test) // 'test' // 注意如果插件編寫成函數(shù)形式，那么Vue只會把this指向null，并不會指向這個函數(shù) console.log(this) // null}// 這種方式我們只能在一個函數(shù)中編寫插件邏輯，可封裝性就不是那么強了小弟不才，對vue源碼的理解暫且到這。歡迎大佬們多指教～
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
