欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.use源碼分析

 更新時間:2017年04月22日 16:41:47   作者:瓜子  
這篇文章主要為大家詳細介紹了Vue.use源碼,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)文章

  • vue2.0 datepicker使用方法

    vue2.0 datepicker使用方法

    這篇文章主要介紹了vue2.0 datepicker的使用方法,非常不錯,具有參考借鑒借鑒價值,需要的朋友參考下
    2018-02-02
  • 淺析Vue中拆分視圖層代碼的5點建議

    淺析Vue中拆分視圖層代碼的5點建議

    這篇文章主要介紹了Vue中拆分視圖層代碼的5點建議,下面就如何進行腳本代碼拆分提供一些思路,有一些可能是很基本的原則,為盡可能完整就放在一起,你并不需要從最開始就采納所有的建議。需要的朋友可以參考下
    2019-08-08
  • vue結(jié)合axios實現(xiàn)restful風(fēng)格的四種請求方式

    vue結(jié)合axios實現(xiàn)restful風(fēng)格的四種請求方式

    這篇文章主要介紹了vue結(jié)合axios實現(xiàn)restful風(fēng)格的四種請求方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示

    Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示

    本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • iview Upload組件多個文件上傳的示例代碼

    iview Upload組件多個文件上傳的示例代碼

    這篇文章主要介紹了iview Upload組件多個文件上傳的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue通過過濾器實現(xiàn)數(shù)據(jù)格式化

    vue通過過濾器實現(xiàn)數(shù)據(jù)格式化

    這篇文章主要介紹了vue通過過濾器實現(xiàn)數(shù)據(jù)格式化的方法,文中講解非常細致,幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • el-upload多選文件上傳報錯解決方案

    el-upload多選文件上傳報錯解決方案

    本文主要介紹了el-upload多選文件上傳報錯解決方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue-cli如何關(guān)閉Uncaught?error的全屏提示

    vue-cli如何關(guān)閉Uncaught?error的全屏提示

    這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)

    Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)

    這篇文章主要介紹了Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù),需要的朋友可以參考下
    2023-01-01
  • Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明

    Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明

    這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-06-06

最新評論