从vue-router里学习插件写法

前言

最近在看vue-router和vuex的源码，都会有自己的install方法，然后通过mixin绑定到生命周期里

vue.use

vue.use兼容带install和不带install，这两种注册的方式都可以，只是install会更容易扩展

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
      <!-- 已经use的插件数组 -->
    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') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

vue-router

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)
    }
  }

<!-- 通过mixin添加生命周期 -->
  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  <!-- 所有实例中 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 }
  })

  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的插件，可以是带install或不带，然后在里面通过mixin，绑定prototype，调用component等方法去注册到vue实例上去