Subscribe on changes!

Custom options merge order

avatar
Sep 3rd 2020

Version

3.0.0-rc.10

Reproduction link

https://jsfiddle.net/skirtle/gxou4bqd/1/

Steps to reproduce

The console logging shows the calls made to merge the custom option.

What is expected?

The final result, as seen in the DOM, should be my-child.

What is actually happening?

The global mixin is merged last, so it takes priority.


The problem here is not just with global mixins. The whole merge order for custom options is incorrect.

Here is an equivalent Vue 2 example. It shows the correct order:

https://jsfiddle.net/skirtle/btqcnj3p/1/

There is a spurious merge in Vue 2 that probably shouldn't be there (the one that logs global-mixin to undefined) but it doesn't seem to do any harm. Apart from that, everything happens in the order is should.

Roughly speaking, the correct order of precedence is:

  1. Global mixins (lowest priority)
  2. extends
  3. mixins
  4. The config object itself (highest priority)

For extends and mixins this order should be applied recursively.

It isn't just a problem for custom properties in optionMergeStrategies. Removing the strategy initially seems to fix the problem as the result is my-child. However, if you also remove the custom: 'my-child' it should fall back to mixin, whereas it actually falls back to extends.