Custom options merge order
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:
- Global mixins (lowest priority)
extends
mixins
- 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
.