Vue.use原理及源碼解讀

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

組件.js
    export const testObj = {
        install(Vue, arg) {
            
        }
    }
    export const testFn = founction(Vue, arg) {
        
    }
    
index.js
    import { testObj, testFn } from './組建.js'
    Vue.use(testObj, arg)
    Vue.use(testFn, arg)
    

建議組件采用第一種寫法枚赡,根據(jù)use源碼,當(dāng)采用第二種寫法時,this指針指向null

    if (typeof plugin.install === 'function') {
          plugin.install.apply(plugin, args)
        } else if (typeof plugin === 'function') {
          plugin.apply(null, args)
        }

官方use源碼

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
// 限制了自定義組建的類型
   const installedPlugins = (this._installedPlugins || (this._installedPlugins =
[]))
//保存注冊組件的數(shù)組,不存在及創(chuàng)建
   if (installedPlugins.indexOf(plugin) > -1) {
//判斷該組件是否注冊過昵宇,存在return Vue對象
     return this
   }
//調(diào)用`toArray`方法
   const args = toArray(arguments, 1)
   args.unshift(this)
//將Vue對象拼接到數(shù)組頭部
   if (typeof plugin.install === 'function') {
//如果組件是對象,且提供install方法儿子,調(diào)用install方法將參數(shù)數(shù)組傳入瓦哎,改變`this`指針為該組件
     plugin.install.apply(plugin, args)
   } else if (typeof plugin === 'function') {
//如果傳入組件是函數(shù),這直接調(diào)用柔逼,但是此時的`this`指針只想為`null` 
     plugin.apply(null, args)
   }
//在保存注冊組件的數(shù)組中添加
   installedPlugins.push(plugin)
   return this
 }
}

toArray方法源碼

export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
//將存放參數(shù)的數(shù)組轉(zhuǎn)為數(shù)組蒋譬,并除去第一個參數(shù)(該組件)
  const ret: Array<any> = new Array(i)
//循環(huán)拿出數(shù)組
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市愉适,隨后出現(xiàn)的幾起案子犯助,更是在濱河造成了極大的恐慌,老刑警劉巖维咸,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剂买,死亡現(xiàn)場離奇詭異惠爽,居然都是意外死亡,警方通過查閱死者的電腦和手機瞬哼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門婚肆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人坐慰,你說我怎么就攤上這事较性。” “怎么了结胀?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵赞咙,是天一觀的道長。 經(jīng)常有香客問我把跨,道長,這世上最難降的妖魔是什么沼死? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任着逐,我火速辦了婚禮,結(jié)果婚禮上意蛀,老公的妹妹穿的比我還像新娘耸别。我一直安慰自己,他們只是感情好县钥,可當(dāng)我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布秀姐。 她就那樣靜靜地躺著,像睡著了一般若贮。 火紅的嫁衣襯著肌膚如雪省有。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天谴麦,我揣著相機與錄音蠢沿,去河邊找鬼。 笑死匾效,一個胖子當(dāng)著我的面吹牛舷蟀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播面哼,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼野宜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了魔策?” 一聲冷哼從身側(cè)響起匈子,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎闯袒,沒想到半個月后旬牲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仿粹,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年原茅,在試婚紗的時候發(fā)現(xiàn)自己被綠了吭历。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡擂橘,死狀恐怖晌区,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情通贞,我是刑警寧澤朗若,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站昌罩,受9級特大地震影響哭懈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜茎用,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一遣总、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧轨功,春花似錦旭斥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至羡滑,卻和暖如春菇爪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柒昏。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工娄帖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人昙楚。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓近速,卻偏偏與公主長得像,于是被迫代替她去往敵國和親堪旧。 傳聞我的和親對象是個殘疾皇子削葱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容