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中。

vue插件開發之-vue.use()的源碼分析。