关于 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&nbsp;mergeHook&nbsp;( &nbsp;&nbsp;parentVal:&nbsp;?Array<Function>, &nbsp;&nbsp;childVal:&nbsp;?Function&nbsp;|&nbsp;?Array<Function>):&nbsp;?Array<Function>&nbsp;{&nbsp;&nbsp;return&nbsp;childVal &nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;parentVal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;parentVal.concat(childVal) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;Array.isArray(childVal) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;childVal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;[childVal] &nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;parentVal }钩子函数最终会被合并为一个数组config.optionMergeStrategies你可以自定义optionMergeStrategies来写自己的合并策略Vue.config.optionMergeStrategies.created&nbsp;=&nbsp;function&nbsp;(parent,&nbsp;child,&nbsp;vm)&nbsp;{&nbsp;&nbsp;return&nbsp;parent; }