为什么Vue.use()在new Vue() 之前使用

5,534 阅读1分钟

使用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实例中也就没有插件内容