关于 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;
}