Vue源码学习（一）----- Mixins

1、Mixins什么时候合并

• 全局mixin和基础全局options合并：
  • 基础全局options指的是components，directives，filters，这三个一开始就给设置在了 Vue.options 上，所以这三个是最先存在全局options，然后我们只要调用全局Vue.mixin混方法就可以立即进行合并；

    Vue.options = Object.create(null);
    ['component','directive','filter'].forEach(function(type) {
        Vue.options[type + 's'] = Object.create(null);
    });

• 全局options和 自定义options合并：

  • options是自己传入的对象参数，与全局的合并；

    function Vue(options){
        vm.$options = mergeOptions(
            { 全局component，
              全局directive，
              全局filter 等....},
            options , vm
        );
        ...处理选项，生成模板，挂载DOM 等....
    }

2、合并的核心方法

• mergeOptions：

  function mergeOptions(parent, child, vm) {    
  
      // 遍历mixins，parent 先和 mixins 合并，然后在和 child 合并
  
      if (child.mixins) {        
  
          for (var i = 0, l = child.mixins.length; i < l; i++) {
  
              parent = mergeOptions(parent, child.mixins[i], vm);
          }
  
      }    
     
      var options = {}, key;    
  
      // 先处理 parent 的 key，
  
      for (key in parent) {
          mergeField(key);
  
      }    
  
      // 遍历 child 的key ，排除已经处理过的 parent 中的key
  
      for (key in child) {        
  
          if (!parent.hasOwnProperty(key)) {
  
              mergeField(key);
          }
  
      }    
  
      // 拿到相应类型的合并函数，进行合并字段，strats 请看下面
  
      function mergeField(key) {    
  
          // strats 保存着各种字段的处理函数，否则使用默认处理
          var strat = strats[key] || defaultStrat;    
  
          // 相应的字段处理完成之后，会完成合并的选项
  
          options[key] = strat(parent[key], child[key], vm, key);
      }    
  
      return options
  
  }

  • 先遍历合并 parent 中的key，保存在变量options；
  • 再遍历 child，合并补上 parent 中没有的key，保存在变量options；
  • 优先处理 mixins ，但是过程跟上面是一样的，只是递归处理而已；
  • 在上面实例初始化时的合并， parent 就是全局选项，child 就是组件自定义选项，因为 parent 权重比 child 低，所以先处理 parent 。

2、遇到的问题

　　暂无