摘要：代碼如下核心這里會再次合并一下上的全局的一些指令或則組件或則過濾器到組件的構造函數上最后在內部組件初始化時。會調用這里還是把構造函數的放在了上供后續使用總的來說。將原型指向根構造函數的自然而然就會有的原型上的所有屬性和方法。。

插件：聰明的程序員往往希望能更高(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. 添加實例方法
  Vue.prototype.$myMethod = function (options) {
    // 邏輯...
  }
}

我們按官網推薦的四種例子。來看看每種方法對應的源碼：

1:Vue.myGlobalMethod = function () {
    // 邏輯...
  }

類似jquery中的jquery.myGlobalMethod或則$.myGlobalMethod簡單來說就是給Vue這個全局對象添加一些工具方法。可以供全局快捷調用。我們這里就略過了

2: // 2. 添加全局資源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

Vue.directive，Vue.filter，Vue.component等價。當全局使用這些api時。會在vue上把這些指令過濾器組件等放在相應的屬性數組里。形如：

Vue.options = {
    components: {
      
    },
    directives: {},
    filters: {},
    _base: Vue
}

因為他掛在全局的vue中。在vue初始化。調用init方法時。會執行：

 vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),//策略合并核心函數。可以仔細去看看
        options || {},
        vm
      );

vue在創建實例時。會把vue對象上的options的對象中的屬性提取出來和傳入的options做合并。這里涉及到合并策略。以后會專門講一下。這里只要知道。vue每個配置相都有自己的合并規則。mergeOptions會根據合并的類目去選擇對應的合并規則。這里的component.directive.filter根據合并規則。Vue對象上的全局的這些屬性會被放在實例的__proto__上。
同樣的。相應的子組件。可以回過頭去看一下組件那一章。在render創建子組件的時候。代碼如下：

function createComponent (
  Ctor,
  data,
  context,
  children,
  tag
) {
  if (isUndef(Ctor)) {
    return
  }

  var baseCtor = context.$options._base;

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor);
  }

  // if at this stage it"s not a constructor or an async component factory,
  // reject.
  if (typeof Ctor !== "function") {
    {
      warn(("Invalid Component definition: " + (String(Ctor))), context);
    }
    return
  }

  // async component
  if (isUndef(Ctor.cid)) {
    Ctor = resolveAsyncComponent(Ctor, baseCtor, context);
    if (Ctor === undefined) {
      // return nothing if this is indeed an async component
      // wait for the callback to trigger parent update.
      return
    }
  }

  // resolve constructor options in case global mixins are applied after
  // component constructor creation
  resolveConstructorOptions(Ctor);//核心：這里會再次合并一下vue上的全局的一些指令或則組件或則過濾器到組件的構造函數上

  data = data || {};

  // transform component v-model data into props & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data);
  }

  // extract props
  var propsData = extractPropsFromVNodeData(data, Ctor, tag);

  // functional component
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }

  // extract listeners, since these needs to be treated as
  // child component listeners instead of DOM listeners
  var listeners = data.on;
  // replace with listeners with .native modifier
  data.on = data.nativeOn;

  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything
    // other than props & listeners
    data = {};
  }

  // merge component management hooks onto the placeholder node
  mergeHooks(data);

  // return a placeholder vnode
  var name = Ctor.options.name || tag;
  var vnode = new VNode(
    ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : "")),
    data, undefined, undefined, undefined, context,
    { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children }
  );
  return vnode
}

最后在內部組件初始化時。vue會調用

function initInternalComponent (vm, options) {
  var opts = vm.$options = Object.create(vm.constructor.options);//這里還是把構造函數的options放在了$options上供后續使用
  // doing this because it"s faster than dynamic enumeration.
  opts.parent = options.parent;
  opts.propsData = options.propsData;
  opts._parentVnode = options._parentVnode;
  opts._parentListeners = options._parentListeners;
  opts._renderChildren = options._renderChildren;
  opts._componentTag = options._componentTag;
  opts._parentElm = options._parentElm;
  opts._refElm = options._refElm;
  if (options.render) {
    opts.render = options.render;
    opts.staticRenderFns = options.staticRenderFns;
  }
}

總的來說。如果是全局的指令過濾器時。vue統一把他放在根構造方法上。根實例初始化時。通過策略合并合并到$options中。而子組件稍微繞了一下。最終也是放在$options的原型上。很連貫啊。這樣只要是全局的組件。指令過濾器。每個子組件都可以繼承使用。達到了插件的效果。

3:下面來看看mixin方法：

Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })


Vue.mixin = function (mixin) {
    this.options = mergeOptions(this.options, mixin);
  };


//這里還是不可避免要看看mergeOptions函數：
function mergeOptions (
  parent,
  child,
  vm
) {
  {
    checkComponents(child);
  }

  if (typeof child === "function") {
    child = child.options;
  }

  normalizeProps(child);
  normalizeDirectives(child);
  var extendsFrom = child.extends;
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm);
  }
  if (child.mixins) {
    for (var i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm);
    }
  }
  var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }
  function mergeField (key) {
    var strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key], vm, key);
  }
  return options
}

分兩種情況吧：

a:全局注冊時即vue.mixin時。直接調用合并。直接便利mixin中的項目。分別調用相應合并策略。合并到構造函數的options中。影響后面所有的子組件

b:局部注冊時。

if (child.mixins) {
    for (var i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm);
    }
  }

則會去遞歸的調用合并策略把該合并的項目合并結束為止；

vue.mixin就相當于是一個傳入的額外的配置項目，會讓vue重新按照規則合并一次，成功入侵vue

4:

// 4. 添加實例方法
  Vue.prototype.$myMethod = function (options) {
    // 邏輯...
  }

這個方法就很明顯了。在vue的原型上掛載方法。vue的實例自然而然就能繼承。子組件在創建的時候。

Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;

將原型指向根構造函數Vue的prototype；自然而然就會有Vue的原型上的所有屬性和方法。。

以上就是vue比較常用的插件侵入方法。哈哈。下次再說。告辭