关于 Vue Component 的继承问题

Question

最近在看 Vue Component 如何实现继承的写法。通过浏览官方文档，我看到了可以使用 mixins 和 extends 这两个方式实现 Vue Component 的扩展。

但是这两个方法都会有一个问题，super 组件的 lifecycle function 都会执行。示例如下：

var superComponent = {
   //......
   created() {
      console.log("super component created!");
   }
}

var component = {
   extends: superComponent,
   //......
   created() {
      console.log("component created!");
   }
}

组件 component 被渲染到页面上之后，查看控制台，会出现两段字样：

super component created!
component created!

那如何做到，在 super component 和 component 都有 lifecycle 的时候，只有 component 的 lifecycle function 会执行呢？

Answer 1

钩子函数默认的合并策略：

function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

钩子函数最终会被合并为一个数组

config.optionMergeStrategies

你可以自定义optionMergeStrategies来写自己的合并策略

Vue.config.optionMergeStrategies.created = function (parent, child, vm) {
  return parent;
}