vue.use()做了什麼

JoKal發表於2019-03-05
Vue

initUse的原始碼：

// 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) {
      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
  }
}
複製程式碼

原始碼中vue的外掛不允許重複註冊。 並且接收的plugin引數的限制是Function | Object兩種型別。 對於這兩種型別有不同的處理。 首先將我們傳入的引數整理成陣列 => const args = toArray(arguments, 1)。

toArray原始碼

// 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
}
複製程式碼

物件中包含install方法，那麼我們就呼叫這個plugin的install方法並將整理好的陣列當成引數傳入install方法中。 => plugin.install.apply(plugin, args) 如果我們傳入的plugin就是一個函式,那麼我們就直接呼叫這個函式並將整理好的陣列當成引數傳入。 => plugin.apply(null, args) 之後給這個外掛新增至已經新增過的外掛陣列中，標示已經註冊過 => installedPlugins.push(plugin) 最後返回Vue物件。

相關文章