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