Vue.use()的用法和install的用法解析

更新時(shí)間：2022年03月29日 09:40:21 作者：清風(fēng)細(xì)雨_林木木

這篇文章主要介紹了Vue.use()的用法和install的用法解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue.use()和install用法

介紹

在vue的main.js中，我們經(jīng)常使用Vue.use(xx)方法。比如我們引入elementUI，在main.js中，我們一般通過如下代碼引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

為什么這樣做？

官方解釋

安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數(shù)，它會被作為 install 方法。

install 方法調(diào)用時(shí)，會將 Vue 作為參數(shù)傳入。什么意思呢？ Vue.use() 中的參數(shù)必須是一個function函數(shù)或者是一個Object對象，如果是對象的話，必須在對象中提供一個install方法。之后會將 Vue 作為參數(shù)傳入。

總結(jié)：

如果Vue.use() 中的參數(shù)是一個function函數(shù)，那么函數(shù)的參數(shù)是Vue對象。

如果Vue.use() 中的參數(shù)是一個Object對象，那么這個對象必須提供一個install方法，install方法的參數(shù)就是Vue。

Vue.use為什么要使用install

疑問

Vue.use注冊插件和Vue.prototype.xxx掛載方式有什么區(qū)別，使用Vue.use優(yōu)勢在哪，為什么使用Vue.use而不使用Vue.prototype.xxx

從源碼分析

// Vue源碼文件路徑：src/core/shared/util.js
export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

// Vue源碼文件路徑：src/core/global-api/use.js
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) { // 如果該插件已被注冊，則不再進(jìn)行注冊
      return this
    }
    // additional parameters
    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
  }
}