Vue.use 源碼分析

Vue.use用法

vue提供了 Vue.use 的全局api來註冊插件，好比 vuex、vue-router等html

用法

Vue.use(plugin)前端

參數若是是一個對象，必須提供 install 方法
參數若是是一個函數，自身會被當作install方法，方法調用的時候，會將vue做爲參數傳入
Vue.use(plugin) 調用以後，插件會的 install方法會默認接受第一個參數，這個參數是vue

這個方法須要在 new vue() 以前調用。vue

Vue.use 會自動阻止屢次註冊相同插件，即便調用屢次也只會註冊一次。node

Vue.use源碼分析

咱們能夠從源碼入手分析一下，基於vue 2.6.11 版本，源碼地址爲：src/core/global-api/use.js^[1]git

export function initUse (Vue: GlobalAPI) {
  // 接受一個plugin參數，限制爲 Function | Object兩種類型
  Vue.use = function (plugin: Function | Object) {
    // _installedPlugins 存儲全部註冊過的 plugin
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 保存註冊組件的數組，不存在則建立，存在則直接返回，不容許重複註冊
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    // 將傳入的參數轉換成數組
    const args = toArray(arguments, 1)
    // 將Vue對象拼接到數組頭部
    args.unshift(this)
    // 若是提供了 install 方法，則直接調用
    if (typeof plugin.install === 'function') {
      // 若是組件是對象，且提供install方法，調用install方法將參數數組傳入，改變`this`指針爲該組件
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      // 不然直接執行
      plugin.apply(null, args)
    }
    // 將plugin存儲到 installedPlugins，表示y已經註冊過
    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主要作了兩件事github

檢查插件是否已經註冊，註冊過得不須要重複註冊web
沒有註冊的，調用插件的install方法（參數是對象，則調用對象的install方法，若是是函數，則直接當作install方法調用）, 同時將Vue做爲第一個參數傳入vue-router

Vue-Router中的 install

基於 vue-router3.1.6 版本，源碼位置：src/install.js^[2]vuex

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

/*
 export 一個 Vue 引用，在打包的時候不但願把 Vue做爲依賴包打進去，可是又但願能夠使用 Vue提供的一些方法，
*/
export let _Vue

// Vue.use安裝插件時候須要暴露的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傳進去的router
        this._router = this.$options.router
        // 執行 init方法
        this._router.init(this)
        // 經過defineReactive方法，來把this._router.history.current變成響應式的，這個方法的底層就是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實例（組件）均可以直接訪問到
 */

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

  // 註冊 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方法主要作了如下幾件事：api

經過 mixin混入的方式，若是是根組件，則直接把根組件的 _router 設置爲 this.$options.router
若是不是根組件，那麼遞歸往上找，直到找到根組件的，使用_routerRoot標記
經過給 Vue.prototype定義$router、$route屬性後，使得全部的Vue實例（組件）均可以直接訪問到 $router、$route 屬性
註冊<router-link>、<router-view>組件

參考

vue官方文檔-插件 ^[3]
前端路由簡介以及vue-router實現原理 ^[4]
Vue.use(plugin)詳解 ^[5]

參考資料

[1]

src/core/global-api/use.js: https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js

[2]

src/install.js: https://github.com/vuejs/vue-router/blob/dev/src/install.js

[3]

vue官方文檔-插件: https://cn.vuejs.org/v2/guide/plugins.html

[4]

前端路由簡介以及vue-router實現原理: https://juejin.im/post/5b10b46df265da6e2a08a724

[5]

Vue.use(plugin)詳解: https://juejin.im/post/5d8464a76fb9a06b3260ad30

本文分享自微信公衆號 - 牧碼的星星（gh_0d71d9e8b1c3）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。