vue源码解析之插件入侵机制

先说一点概念性的东西哈~

插件：聪明的程序员往往希望能更高(tou)效(lan)的完成指定的工作，插件就是按照一定的封装方式，暴露接口。让我们利用这些接口更快捷的实现功能。升职加薪。每个框架都提供了插件的扩展机制。这是框架可扩展性必不可少的一个部分。插件机制越简单。对于框架的生态的发展大有好处。jquery提供了$.fn.extend,angular有对应的依赖注入，module机制。既然vue那么精美，能迅速火起来。插件这部分的可扩展性必须顶级。这里接下来我们看看vue插件的入侵机制。

说到插件。我们最多使用的一个方法。无非就是 Vue.use(MyPlugin, { someOption: true });

这么说的话，这个方法应该是所有插件入侵vue的起点。没错。

那么我们来看看这个方法：

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return  //假如插件已经初始化过就不再继续。避免插件重复入侵
    }
    // additional parameters
    var args = toArray(arguments, 1);//获取插件的配置参数
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args); //调用的是插件的install方法；
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);//若插件本省就是一个函数。则直接调用该函数
    }
    plugin.installed = true;
    return this
  };

Vue.use这个方法让我们知道  插件入侵的起点是调用插件自身的install函数。那么不同的插件入侵的机制有些时候很不一样。我们可以知道。这个不一样肯定发生在install函数中。我们来看看官方的install函数中的一些方式：

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