Vue.use的作用以及什麼時候使用

在Vue中引入使用第三方庫通常我們都會採用import的形式引入進來，但是有的組件在引入之後又做了Vue.use()操作，有的組件引入進來又進行了Vue.prototype.$something = something，那麼它們之間有什麼聯繫呢？

• 先說一下Vue.prototype，在Vue項目中通常我們引入axios來進行請求接口數據，通過npm安裝之後我們只需在我們的文件中import axios from "axios"就可以使用，有時候我們會加上一句Vue.prototype.$axios = axios，prototype我們應該是再熟悉不過了

Vue.prototype.$axios = axios
//其實是在Vue原型上增加了一個$axios，通過我們會在全局註冊這個方法，然後在周後的文件中都可以通過$axios直接來使用axios

• Vue.use是什麼？
  官方對 Vue.use() 方法的說明：通過全局方法 Vue.use() 使用插件，Vue.use 會自動阻止多次註冊相同插件，它需要在你調用 new Vue() 啓動應用之前完成，Vue.use() 方法至少傳入一個參數，該參數類型必須是 Object 或 Function，如果是 Object 那麼這個 Object 需要定義一個 install 方法，如果是 Function 那麼這個函數就被當做 install 方法。在 Vue.use() 執行時 install 會默認執行，當 install 執行時第一個參數就是 Vue，其他參數是 Vue.use() 執行時傳入的其他參數。就是說使用它之後調用的是該組件的install 方法。
• Vue.use() 的源碼中的邏輯

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }
  const 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)
  }
  installedPlugins.push(plugin)
  return this
 }
}

在源碼中首先限制了它傳入的值的類型只能是Function或者Object，然後判斷了該插件是不是已經註冊過，防止重複註冊，然後調用了該插件的install方法，源碼中也有介紹到Vue.use()可以接受多個參數的，除第一個參數之後的參數我們都是以參數的形式傳入到當前組件中。

• Vue.use()什麼時候使用？
  它在使用時實際是調用了該插件的install方法，所以引入的當前插件如果含有install方法我們就需要使用Vue.use()，例如在Vue中引用Element如下：

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

因爲在Element源碼中會暴露除install方法，所以才需要用Vue.use()引入。
我們也可以在自己的vue項目中自己定義一個install方法，然後通過Vue.use()方法來引入測試一下：

const plugin = {
  install() {
    alert("我是install內的代碼")
  },
}
import Vue from "vue"
Vue.use(plugin) // 頁面顯示"我是install內的代碼"

當我們打開頁面就會彈出“我是install內的代碼”提示。