Vue.use源碼分析
我想有過vue開發(fā)經(jīng)驗的,對于vue.use并不陌生。當(dāng)使用vue-resource或vue-router等全局組件時,必須通過Vue.use方法引入,才起作用。那么vue.use在組件引入之前到底做了那些事情呢?讓我們一窺究竟。
先上vue.use源碼
// javascript的方法是可以傳遞的,哈哈 Vue.use = function (plugin) { /* istanbul ignore if */ 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 if (typeof plugin === 'function') { plugin.apply(null, args); } plugin.installed = true; return this };
假設(shè)我們通過Vue.use引入一個插件plugin(該插件可以暫時理解為一個變量或參數(shù)),即Vue.use(plugin);
首先判斷傳入的參數(shù)plugin的屬性installed是否存在,如果存在且邏輯值為真,那么直接返回,后邊的代碼就不會再執(zhí)行,這個判斷的作用是什么呢?后邊會講到。
我們先假設(shè)plugin的屬性installed不存在或為假,那么繼續(xù)往下執(zhí)行。
var args = toArray(arguments, 1);
//執(zhí)行了一個toArray方法,toArray接收了兩個參數(shù),arguments為Vue.use方法傳入的參數(shù)集合,例如Vue.use(a,b,c),那么arguments類似于[a,b,c](說明:arguments只是類數(shù)組,并不是真正的數(shù)組)。此處因為只引入一個參數(shù)plugin,所以arguments類似于[plugin]。
toArray的作用是什么呢?看源碼。
function toArray (list, start){ start = start || 0; var i = list.length - start; var ret = new Array(i); while (i--) { ret[i] = list[i + start]; } return ret }
當(dāng)執(zhí)行toArray(arguments,1),會生成一個新數(shù)組ret,長度 = arguments.length-1,然后進行while循環(huán),依次倒序把arguments的元素賦值給ret,因為ret比arguments長度少1,所以最終等同于arguments把除了第一個元素外的其余元素賦值給ret。toArray主要作用就是把類數(shù)組轉(zhuǎn)化為真正的數(shù)組,這樣才能調(diào)用數(shù)組的方法。因為此處我只引入一個plugin參數(shù),即arguments=[plugin],所以toArray返回為空數(shù)組[]。
接著往下執(zhí)行,args.unshift(this),等同于[].unshift(Vue),即args = [Vue];然后執(zhí)行
if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args); } else if (typeof plugin === 'function') { plugin.apply(null, args); }
此處判斷plugin的install是否為函數(shù),如果為函數(shù),立即執(zhí)行pluign.install方法,install方法傳入的參數(shù)為args內(nèi)數(shù)組元素,即install接受的第一個參數(shù)為Vue.
如果plugin的install不是函數(shù),那么判斷plugin本身是否為函數(shù),如果為函數(shù),那么執(zhí)行plugin函數(shù),且參數(shù)為args內(nèi)數(shù)組元素。
最后設(shè)置plugin.installed為true。設(shè)置plugin.installed為true的作用是避免同一個插件多次執(zhí)行安裝,比如Vue.use(plugin)執(zhí)行一次之后,installed為true,再次執(zhí)行的話走到第一步判斷就返回了。
綜上所述,Vue.use的作用其實就是執(zhí)行一個plugin函數(shù)或者執(zhí)行pluign的install方法進行插件注冊,并且向plugin或其install方法傳入Vue對象作為第一個參數(shù),use的其他參數(shù)作為plugin或install的其他參數(shù)。
舉個簡單的例子
import Vue from 'vue' function test(a){ console.log(a);//Vue } function test1(a,b){ console.log(a,b);//Vue hello } let oTest = { install:function(a,b){ console.log(a,b);//Vue hello1 } } Vue.use(test); Vue.use(test1,'hello'); Vue.use(oTest,'hello1'); console.log(oTest); //{ install:function(){...}, installed:true }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合axios實現(xiàn)restful風(fēng)格的四種請求方式
這篇文章主要介紹了vue結(jié)合axios實現(xiàn)restful風(fēng)格的四種請求方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03vue通過過濾器實現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了vue通過過濾器實現(xiàn)數(shù)據(jù)格式化的方法,文中講解非常細致,幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-06-06