文章首次發(fā)表在 個(gè)人博客

vue提供了 Vue.use 的全局api來注冊(cè)插件，了解它的內(nèi)部實(shí)現(xiàn)，無論是看插件的源碼，還是自己寫插件，都會(huì)輕松很多。

Vue.use用法

vue提供了 Vue.use 的全局api來注冊(cè)插件，比如 vuex、vue-router等

用法

Vue.use(plugin)

• 參數(shù)如果是一個(gè)對(duì)象，必須提供 install 方法
• 參數(shù)如果是一個(gè)函數(shù)，自身會(huì)被當(dāng)做install方法，方法調(diào)用的時(shí)候，會(huì)將vue作為參數(shù)傳入
• Vue.use(plugin) 調(diào)用之后，插件會(huì)的 install方法會(huì)默認(rèn)接受第一個(gè)參數(shù)，這個(gè)參數(shù)是vue

這個(gè)方法需要在 new vue() 之前調(diào)用。

Vue.use 會(huì)自動(dòng)阻止多次注冊(cè)相同插件，即使調(diào)用多次也只會(huì)注冊(cè)一次。

Vue.use源碼分析

我們可以從源碼入手分析一下，基于vue 2.6.11 版本，源碼地址為：src/core/global-api/use.js

export function initUse (Vue: GlobalAPI) {
  // 接受一個(gè)plugin參數(shù)，限制為 Function | Object兩種類型
  Vue.use = function (plugin: Function | Object) {
    // _installedPlugins 存儲(chǔ)所有注冊(cè)過的 plugin
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 保存注冊(cè)組件的數(shù)組，不存在則創(chuàng)建，存在則直接返回，不允許重復(fù)注冊(cè)
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    // 將傳入的參數(shù)轉(zhuǎn)換成數(shù)組
    const args = toArray(arguments, 1)
    // 將Vue對(duì)象拼接到數(shù)組頭部
    args.unshift(this)
    // 如果提供了 install 方法，則直接調(diào)用
    if (typeof plugin.install === 'function') {
      // 如果組件是對(duì)象，且提供install方法，調(diào)用install方法將參數(shù)數(shù)組傳入，改變`this`指針為該組件
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      // 否則直接執(zhí)行
      plugin.apply(null, args)
    }
    // 將plugin存儲(chǔ)到  installedPlugins，表示y已經(jīng)注冊(cè)過
    installedPlugins.push(plugin)
    return this
  }
}

/**
 * Convert an Array-like object to a real Array.
 */
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.use主要做了兩件事

1. 檢查插件是否已經(jīng)注冊(cè)，注冊(cè)過得不需要重復(fù)注冊(cè)

2. 沒有注冊(cè)的，調(diào)用插件的install方法（參數(shù)是對(duì)象，則調(diào)用對(duì)象的install方法，如果是函數(shù)，則直接當(dāng)做install方法調(diào)用）, 同時(shí)將Vue作為第一個(gè)參數(shù)傳入

Vue-Router中的 install

基于 vue-router3.1.6 版本，源碼位置： src/install.js

import View from './components/view'
import Link from './components/link'

/*
  export 一個(gè) Vue 引用，在打包的時(shí)候不希望把 Vue作為依賴包打進(jìn)去，但是又希望可以使用 Vue提供的一些方法，
*/
export let _Vue

// Vue.use安裝插件時(shí)候需要暴露的install方法
export function install (Vue) {
  // 判斷是否已安裝過
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }
  // 混入 beforeCreate 
  Vue.mixin({
    beforeCreate () {
      // 在option上面存在router則代表是根組件 
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        // 根組件的_router屬性為，new Vue傳進(jìn)去的router
        this._router = this.$options.router
        // 執(zhí)行 init方法
        this._router.init(this)
        // 通過defineReactive方法，來把this._router.history.current變成響應(yīng)式的，這個(gè)方法的底層就是object.defineProperty
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        // 如果該組件不是根組件，那么遞歸往上找，直到找到根組件的。
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  /*
    下面通過給 Vue.prototype定義$router、$route屬性后，所有的Vue實(shí)例（組件）都可以直接訪問到
  */

  // 設(shè)置代理，訪問 this.$router 時(shí)直接代理到 this._routerRoot._router
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })
  // 設(shè)置代理，訪問 this.$route 時(shí)直接代理到 this._routerRoot._route
  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  // 注冊(cè) router-view 和 router-link 組件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

vue-router中的install方法主要做了以下幾件事：

1. 通過 mixin混入的方式，如果是根組件，則直接把根組件的 _router 設(shè)置為 this.$options.router

2. 如果不是根組件，那么遞歸往上找，直到找到根組件的，使用_routerRoot標(biāo)記

3. 通過給 Vue.prototype定義$router、$route屬性后，使得所有的Vue實(shí)例（組件）都可以直接訪問到 $router、$route 屬性

4. 注冊(cè)<router-link>、<router-view>組件

參考

• vue官方文檔-插件
• 前端路由簡介以及vue-router實(shí)現(xiàn)原理
• Vue.use(plugin)詳解

其他

最近發(fā)起了一個(gè)100天前端進(jìn)階計(jì)劃，主要是深挖每個(gè)知識(shí)點(diǎn)背后的原理，歡迎關(guān)注 微信公眾號(hào)「牧碼的星星」，我們一起學(xué)習(xí)，打卡100天。