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

假設我們通過Vue.use引入一個插件plugin(該插件可以暫時理解為一個變量或參數),即Vue.use(plugin); 

首先判斷傳入的參數plugin的屬性installed是否存在，如果存在且邏輯值為真，那么直接返回，后邊的代碼就不會再執行，這個判斷的作用是什么呢？后邊會講到。 

我們先假設plugin的屬性installed不存在或為假，那么繼續往下執行。

var args = toArray(arguments, 1);

//執行了一個toArray方法，toArray接收了兩個參數，arguments為Vue.use方法傳入的參數集合，例如Vue.use(a,b,c),那么arguments類似于[a,b,c]（說明：arguments只是類數組，并不是真正的數組）。此處因為只引入一個參數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
}

當執行toArray(arguments,1)，會生成一個新數組ret，長度 = arguments.length-1，然后進行while循環，依次倒序把arguments的元素賦值給ret,因為ret比arguments長度少1，所以最終等同于arguments把除了第一個元素外的其余元素賦值給ret。toArray主要作用就是把類數組轉化為真正的數組，這樣才能調用數組的方法。因為此處我只引入一個plugin參數，即arguments=[plugin]，所以toArray返回為空數組[]。

接著往下執行，args.unshift(this)，等同于[].unshift(Vue),即args = [Vue];然后執行

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

此處判斷plugin的install是否為函數，如果為函數，立即執行pluign.install方法，install方法傳入的參數為args內數組元素，即install接受的第一個參數為Vue.

如果plugin的install不是函數，那么判斷plugin本身是否為函數，如果為函數，那么執行plugin函數，且參數為args內數組元素。

最后設置plugin.installed為true。設置plugin.installed為true的作用是避免同一個插件多次執行安裝，比如Vue.use(plugin)執行一次之后，installed為true,再次執行的話走到第一步判斷就返回了。

綜上所述，Vue.use的作用其實就是執行一個plugin函數或者執行pluign的install方法進行插件注冊，并且向plugin或其install方法傳入Vue對象作為第一個參數，use的其他參數作為plugin或install的其他參數。

舉個簡單的例子

 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
}

關于“Vue.use源碼的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。