前言

最近幫忙面試前端的時(shí)候，就隨口一問，發(fā)現(xiàn)很多2年以上的vue開發(fā)者說不出vue.use()為什么用，什么時(shí)候用，原理是什么
所以我整理一下網(wǎng)上的資源，寫一篇畢竟容易理解的文章

在Vue中引入使用第三方庫通常我們都會采用import的形式引入進(jìn)來，但是有的組件在引入之后又做了Vue.use()操作，有的組件引入進(jìn)來又進(jìn)行了Vue.prototype.$something = something，那么它們之間有什么聯(lián)系呢？

先說一下Vue.prototype，在Vue項(xiàng)目中通常我們引入axios來進(jìn)行請求接口數(shù)據(jù)，通過npm安裝之后我們只需在我們的文件中import axios from "axios"就可以使用，有時(shí)候我們會加上一句Vue.prototype.$axios = axios，prototype我們應(yīng)該是再熟悉不過了

Vue.prototype.axios，通過我們會在全局注冊這個(gè)方法，然后在周后的文件中都可以通過$axios直接來使用axios

Vue.use是什么？

官方對 Vue.use() 方法的說明：通過全局方法 Vue.use() 使用插件，Vue.use 會自動阻止多次注冊相同插件，它需要在你調(diào)用 new Vue() 啟動應(yīng)用之前完成，Vue.use() 方法至少傳入一個(gè)參數(shù)，該參數(shù)類型必須是 Object 或 Function，如果是 Object 那么這個(gè) Object 需要定義一個(gè) install 方法，如果是 Function 那么這個(gè)函數(shù)就被當(dāng)做 install 方法。在 Vue.use() 執(zhí)行時(shí) install 會默認(rèn)執(zhí)行，當(dāng) install 執(zhí)行時(shí)第一個(gè)參數(shù)就是 Vue，其他參數(shù)是 Vue.use() 執(zhí)行時(shí)傳入的其他參數(shù)。就是說使用它之后調(diào)用的是該組件的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，然后判斷了該插件是不是已經(jīng)注冊過，防止重復(fù)注冊，然后調(diào)用了該插件的install方法，源碼中也有介紹到Vue.use()可以接受多個(gè)參數(shù)的，除第一個(gè)參數(shù)之后的參數(shù)我們都是以參數(shù)的形式傳入到當(dāng)前組件中。

Vue.use()什么時(shí)候使用？

它在使用時(shí)實(shí)際是調(diào)用了該插件的install方法，所以引入的當(dāng)前插件如果含有install方法我們就需要使用Vue.use()，例如在Vue中引用Element如下：

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

因?yàn)樵贓lement源碼中會暴露除install方法，所以才需要用Vue.use()引入。

我們也可以在自己的vue項(xiàng)目中自己定義一個(gè)install方法，然后通過Vue.use()方法來引入測試一下：

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

當(dāng)我們打開頁面就會彈出“我是install內(nèi)的代碼”提示。

到此這篇關(guān)于Vue.use()的作用及原理解析的文章就介紹到這了,更多相關(guān)Vue.use()作用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論