vue2源码-十二、mixin的使用和原理-526互联

mixin的使用和原理

使用：

可以通过 Vue.mixin 来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突 vue3 采用的就是 compositionAPI

局部混入：

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// 混入
Vue.component('componentA',{
  mixins: [myMixin]
})

全局混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

原理：

初始化混入initMixin

export function initMixin(Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    // this==Vue
    // 最终合并将mixin对象和Vue.options合并在一起
    this.options = mergeOptions(this.options, mixin);
    return this;
  };
}

主要是mergeOptions方法。

分析这个函数：将options合并，最终合并将mixin对象和Vue.options合并在一起

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {

if (child.mixins) { // 判断有没有mixin 也就是mixin里面挂mixin的情况 有的话递归进行合并
    for (let i = 0, l = child.mixins.length; i < l; i++) {
    parent = mergeOptions(parent, child.mixins[i], vm)
    }
}

  const options = {} 
  let key
  for (key in parent) {
    mergeField(key) // 先遍历parent的key 调对应的strats[XXX]方法进行合并
  }
  for (key in child) {
    if (!hasOwn(parent, key)) { // 如果parent已经处理过某个key 就不处理了
      mergeField(key) // 处理child中的key 也就parent中没有处理过的key
    }
  }
  // 策略模式
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key) // 根据不同类型的options调用strats中不同的方法进行合并
  }
  return options
}

注意：

优先递归处理mixins
先遍历合并parent中key，调用mergeField方法进行合并，然后保存变量options
再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
通过 mergeField 函数进行了合并