vue是一個漸進式框架，它本身的核心是解決檢視渲染的問題，其它的能力就通過外掛的方式來解決。今天我們來看下vue是如何支援框架的。也就是vue.use這部分的實現。

下面我們以vue-router為例來進行說明，

import VueRouter from  'vue-router'
Vue.use(VueRouter)

這段程式碼大家用過vue-router外掛的應該很熟悉了。vue-router就是vue的一個外掛了。然後我們首先來看下vue.use的原始碼實現。

首先，我們看下vue.use()的入參要求。1，含有install方法的一個物件，2，一個function。我們一般都使用1，也就是含有install方法的這個。vue-router也是符合第一種定義的。

那麼對應的程式碼就是

我們可以看到，他會拿到arguments也就是我們所有引數組成的類陣列。然後呼叫toArray，toArray，這個方法用來把類陣列轉換為陣列，接收兩個引數，第一個類陣列，第二個start

他的作用就是把從start位置到最後的所有元素組成一個數組返回。對我們這裡就是再使用vue.use初始化外掛時候傳入的引數。

接下來拿到返回的陣列args呼叫args.unshift(this).即把vue作為該陣列的第一個元素插入到args。

最後呼叫plugin.install.apply(plugin, args);也就是拿到外掛的install方法，以改元件的定義為this。args為引數進行呼叫。這樣就完成了初始化。

最後重點看下剛開始的兩行程式碼

var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

這裡用到了備忘錄的設計模式，中心思想是如果你已經註冊過了。那麼我就給你儲存起來。下次你再次使用時候就不需要再次做初始化等操作了，可以直接拿到例項。對於效能是很好的優化。那麼我們接下里分析下程式碼

首先vue維護了一個_installedPlugins一個數組，每一次進來時候都會通過installedPlugins.indexOf(plugin)判斷這個外掛是否已經在這個數組裡邊了，也就是註冊過了。如果已經註冊過了直接返回。如果沒有註冊那麼執行接下來的程式碼，最後程式碼結束時候把當前pluginpush到installedPlugins中。