fix(runtime-core): ensure consistent $options merge behavior with 2.x (…

…#1986)

close #1978 , close #1979

packages/runtime-core/__tests__/apiCreateApp.spec.ts

@@ -457,7 +457,7 @@ describe('api: createApp', () => {
  app.config.optionMergeStrategies.foo = (a, b) => (a ? `${a},` : ``) + b
 
  app.mount(nodeOps.createElement('div'))
- expect(merged!).toBe('global,extends,mixin,local')
+ expect(merged!).toBe('local,extends,mixin,global')
  })
 
  test('config.globalProperties', () => {

packages/runtime-core/__tests__/apiOptions.spec.ts

@@ -698,6 +698,50 @@ describe('api: options', () => {
  ])
  })
 
+ test('flatten merged options', async () => {
+ const MixinBase = {
+ msg1: 'base'
+ }
+ const ExtendsBase = {
+ msg2: 'base'
+ }
+ const Mixin = {
+ mixins: [MixinBase]
+ }
+ const Extends = {
+ extends: ExtendsBase
+ }
+ const Comp = defineComponent({
+ extends: defineComponent(Extends),
+ mixins: [defineComponent(Mixin)],
+ render() {
+ return `${this.$options.msg1},${this.$options.msg2}`
+ }
+ })
+
+ expect(renderToString(h(Comp))).toBe('base,base')
+ })
+
+ test('options defined in component have higher priority', async () => {
+ const Mixin = {
+ msg1: 'base'
+ }
+ const Extends = {
+ msg2: 'base'
+ }
+ const Comp = defineComponent({
+ msg1: 'local',
+ msg2: 'local',
+ extends: defineComponent(Extends),
+ mixins: [defineComponent(Mixin)],
+ render() {
+ return `${this.$options.msg1},${this.$options.msg2}`
+ }
+ })
+
+ expect(renderToString(h(Comp))).toBe('local,local')
+ })
+
  test('accessing setup() state from options', async () => {
  const Comp = defineComponent({
  setup() {

packages/runtime-core/src/componentOptions.ts

@@ -767,10 +767,8 @@ export function resolveMergedOptions(
  const globalMixins = instance.appContext.mixins
  if (!globalMixins.length && !mixins && !extendsOptions) return raw
  const options = {}
- globalMixins.forEach(m => mergeOptions(options, m, instance))
- extendsOptions && mergeOptions(options, extendsOptions, instance)
- mixins && mixins.forEach(m => mergeOptions(options, m, instance))
  mergeOptions(options, raw, instance)
+ globalMixins.forEach(m => mergeOptions(options, m, instance))
  return (raw.__merged = options)
 }
 
@@ -783,4 +781,9 @@ function mergeOptions(to: any, from: any, instance: ComponentInternalInstance) {
  to[key] = from[key]
  }
  }
+ const { mixins, extends: extendsOptions } = from
+
+ extendsOptions && mergeOptions(to, extendsOptions, instance)
+ mixins &&
+ mixins.forEach((m: ComponentOptionsMixin) => mergeOptions(to, m, instance))
 }