vue mixin执行覆盖

• vue mixins
• 完整代码

vue 自带的mixin如果钩子函数重复会被组合为一个数组，然后全部从mixin -> widget自动执行。

这里我们改为override的模式，让重写的钩子需要手动调用super去执行（并不强制）

修改钩子

function dedupeHooks(hooks) {
  const res = []
  for (let i = 0; i < hooks.length; i++) {
    if (res.indexOf(hooks[i]) === -1) {
      res.push(hooks[i])
    }
  }
  return res
}

// 这里只做mounted钩子示例
Vue.config.optionMergeStrategies.mounted = function(superVal, val) {
  
  const res = val ?
    superVal ?
    
    // vue自己的逻辑
    // superVal.concat(val)

    [function() {
      this.$$super = {
        mounted: () => superVal.forEach( it => it.call(this) )
      }
    }].concat(val)
    
    :
    Array.isArray(val) ?
    val : [val] :
    superVal;
  
  return res ?
    dedupeHooks(res) :
    res
}

组件内：

{
  mixins: [ListMoreDataMixin],
  mounted() {
    this.$$super.mounted();
    console.log('widget mounted');
    this.$$super.mounted();
  },
}

mixin内:

export const ListMoreDataMixin = {
  mounted() {
    console.log('mixin mounted');
  }
}

打印结果

mixin mounted
widget mounted
mixin mounted

如果组件没有重写mounted那么就会自动执行mixin的mounted，重写就手动调用super