The extends option behavior is same with mixins

[ustbhuangyi]

Version

2.5.13

Reproduction link

https://codesandbox.io/s/x7non3yrj4

Steps to reproduce

See the console

What is expected?

CompB created

CompA created

What is actually happening?

CompA created

CompB created

---

As the Doc says, extends option is similar to mixins, the difference being that the components own options takes higher priority than the source component being extended.
However, the fact is that the source component being extended has higher priority, which is same with mixins.

See the source code of Vue.js

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  // ...
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i  ) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  // ...
}

I think the logic of extends and mixins is almost the same.

[HcySunYang]

I think that's correct, higher priority doesn't mean priority to calling. But the behavior of mixin and extends seems same.

[posva]

The order seems correct to me. Think about classes, you always call super right at the beginning.
It would also be a breaking change, so not feasible right now

[ustbhuangyi]

@posva , so what's the difference between mixin and extends? Maybe the Doc needs to be modified?

[posva]

Contributions to improving docs are always welcome 🙂 ! Make sure to open a PR there if you think it could be clearer

[miro-ku]

@posva, what is the reason to put two options, that do the same?

[ViYaYaYa]

maybe "mixins" takes higher priority than "extends" than the source?