Vue.use()在new Vue() 之前使用的原因浅析

使用vue前端框架开发有些时间了，官方文档对于插件开发也有详细的介绍。最近强迫症犯了，老在想为什么vue.use函数执行，要在vue实例化即new vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。

先看vue.use做了什么

vue.use = function (plugin: function | object) {
  //vue构造函数上定义_installedplugins 避免相同的插件注册多次
  const installedplugins = (this._installedplugins || (this._installedplugins = []))
  // import是单例模式
  //所以plugin不论是fuction还是object同一个插件都是同一个
  if (installedplugins.indexof(plugin) > -1) {
   return this
  }

  // additional parameters
  const args = toarray(arguments, 1)
  // vue作为第一个参数传递给插件
  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 // 返回的是this,可以链式调用
 }

do:

1. 检查插件是否已经注册，相同的插件只注册一次
2. 将vue构造函数作为第一个参数，作为插件注册调用
3. 根据插件形式选择调用plugin.install还是plugin
4. 存储已注册插件，用于插件是否已注册检验

vue.prototype._init中合并options
vue.prototype._init = function (options?: object) {
  const vm: component = this
  // a uid
  vm._uid = uid++
  let starttag, endtag
  ...
  vm.$options = mergeoptions(
    resolveconstructoroptions(vm.constructor),
    options || {},
    vm
   )
   ...
   // 挂载到dom上
  if (vm.$options.el) {
   vm.$mount(vm.$options.el)
  }
}

在new vue(options)时首先会执行this._init进行初始化，将vue上的属性和options进行合并，然后在进行事件、生命周期等的初始化。beforecreate,created生命周期的hook函数也是在这里进行调用

如果vue.use在new vue()之后执行，this._init()时你使用的插件的内容还没有添加到vue.options.components、vue.options.directives、vue.options.filters等属性中。所以新初始化的vue实例中也就没有插件内容

总结

以上所述是小编给大家介绍的vue.use()在new vue() 之前使用的原因浅析,希望对大家有所帮助