为什么axios、echart不需要Vue.use()

定义

通过全局方法Vue.use()使用插件,也可以理解成注册插件,它需要在你调用new Vue()启动应用之前完成.

插件

插件通常用来为Vue添加全局功能.插件的功能范围没有严格的限制---一般有下面几种:
1.添加全局方法或者property.如:vue-custom-element
2.添加全局资源:指令/过滤器/过渡.如vue-touch
3.通过全局混入来添加一些组件选项.如vue-router
4.添加Vue实例方法,通过把它们添加到Vue.prototype上实现.
5.一个库,提供自己的API,同时提供上面的一个或多个功能.如vue-router

开发插件

Vue插件应该暴露一个install方法.这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象:

const install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
export default install

源码解析

  function initUse (Vue) {
    Vue.use = function (plugin) {
      var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
      if (installedPlugins.indexOf(plugin) > -1) {// 判断 插件是否注册过,防止重复注册
        return this
      }
      // 从第一个参数开始截取,并且将this也就是Vue实例放在参数的第一个位置
      var args = toArray(arguments, 1);
      args.unshift(this);
   
      if (typeof plugin.install === 'function') { // plugin.install如果是方法,执行plugin.install方法并且将参数传入
        plugin.install.apply(plugin, args);
      } else if (typeof plugin === 'function') { // plugin如果是方法,执行plugin方法并且将参数传入
        plugin.apply(null, args);
      }
      installedPlugins.push(plugin); // 记录该组件已经被注册过了
      return this
    };
  }

为什么axios、echart不用Vue.use()

因为 axios、echart 没有 install方法

Vue.use()先判断是否注册过这个插件,然后看插件中install是不是方法,如果是就将参数传入install方法中并执行install方法

最后编辑于：2021.07.24 10:57:44