chore: Merge branch 'v2-compat'

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

@@ -481,4 +481,7 @@ describe('api: createApp', () => {
     app.mount(root)
     expect(serializeInner(root)).toBe('hello')
   })
+
+  // config.compilerOptions is tested in packages/vue since it is only
+  // supported in the full build.
 })

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

@@ -6,7 +6,7 @@ import {
   createApp,
   shallowReadonly
 } from '@vue/runtime-test'
-import { ComponentInternalInstance } from '../src/component'
+import { ComponentInternalInstance, ComponentOptions } from '../src/component'
 
 describe('component: proxy', () => {
   test('data', () => {
@@ -93,7 +93,7 @@ describe('component: proxy', () => {
     expect(instanceProxy.$root).toBe(instance!.root.proxy)
     expect(instanceProxy.$emit).toBe(instance!.emit)
     expect(instanceProxy.$el).toBe(instance!.vnode.el)
-    expect(instanceProxy.$options).toBe(instance!.type)
+    expect(instanceProxy.$options).toBe(instance!.type as ComponentOptions)
     expect(() => (instanceProxy.$data = {})).toThrow(TypeError)
     expect(`Attempting to mutate public property "$data"`).toHaveBeenWarned()
 

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

@@ -82,7 +82,7 @@ describe('component: slots', () => {
     expect(slots.default()).toMatchObject([normalizeVNode(h('span'))])
   })
 
-  test('updateSlots: instance.slots should be update correctly (when slotType is number)', async () => {
+  test('updateSlots: instance.slots should be updated correctly (when slotType is number)', async () => {
     const flag1 = ref(true)
 
     let instance: any
@@ -124,7 +124,7 @@ describe('component: slots', () => {
     expect(instance.slots).toHaveProperty('two')
   })
 
-  test('updateSlots: instance.slots should be update correctly (when slotType is null)', async () => {
+  test('updateSlots: instance.slots should be updated correctly (when slotType is null)', async () => {
     const flag1 = ref(true)
 
     let instance: any

packages/runtime-core/src/apiCreateApp.ts

@@ -4,17 +4,20 @@ import {
   validateComponentName,
   Component
 } from './component'
-import { ComponentOptions } from './componentOptions'
+import { ComponentOptions, RuntimeCompilerOptions } from './componentOptions'
 import { ComponentPublicInstance } from './componentPublicInstance'
 import { Directive, validateDirectiveName } from './directives'
 import { RootRenderFunction } from './renderer'
 import { InjectionKey } from './apiInject'
-import { isFunction, NO, isObject } from '@vue/shared'
 import { warn } from './warning'
 import { createVNode, cloneVNode, VNode } from './vnode'
 import { RootHydrateFunction } from './hydration'
 import { devtoolsInitApp, devtoolsUnmountApp } from './devtools'
+import { isFunction, NO, isObject } from '@vue/shared'
 import { version } from '.'
+import { installCompatMount } from './compat/global'
+import { installLegacyConfigProperties } from './compat/globalConfig'
+import { installGlobalFilterMethod } from './compat/filter'
 
 export interface App<HostElement = any> {
   version: string
@@ -39,6 +42,17 @@ export interface App<HostElement = any> {
   _props: Data | null
   _container: HostElement | null
   _context: AppContext
+
+  /**
+   * v2 compat only
+   */
+  filter?(name: string): Function | undefined
+  filter?(name: string, filter: Function): this
+
+  /**
+   * @internal v3 compat only
+   */
+  _createRoot?(options: ComponentOptions): ComponentPublicInstance
 }
 
 export type OptionMergeFunction = (
@@ -55,7 +69,6 @@ export interface AppConfig {
   performance: boolean
   optionMergeStrategies: Record<string, OptionMergeFunction>
   globalProperties: Record<string, any>
-  isCustomElement: (tag: string) => boolean
   errorHandler?: (
     err: unknown,
     instance: ComponentPublicInstance | null,
@@ -66,6 +79,17 @@ export interface AppConfig {
     instance: ComponentPublicInstance | null,
     trace: string
   ) => void
+
+  /**
+   * @deprecated use config.compilerOptions.isCustomElement
+   */
+  isCustomElement?: (tag: string) => boolean
+
+  /**
+   * Options to pass to @vue/compiler-dom.
+   * Only supported in runtime compiler build.
+   */
+  compilerOptions: RuntimeCompilerOptions
 }
 
 export interface AppContext {
@@ -85,6 +109,11 @@ export interface AppContext {
    * @internal
    */
   reload?: () => void
+  /**
+   * v2 compat only
+   * @internal
+   */
+  filters?: Record<string, Function>
 }
 
 type PluginInstallFunction = (app: App, ...options: any[]) => any
@@ -103,9 +132,11 @@ export function createAppContext(): AppContext {
       performance: false,
       globalProperties: {},
       optionMergeStrategies: {},
-      isCustomElement: NO,
       errorHandler: undefined,
-      warnHandler: undefined
+      warnHandler: undefined,
+      compilerOptions: {
+        isCustomElement: NO
+      }
     },
     mixins: [],
     components: {},
@@ -298,6 +329,12 @@ export function createAppAPI<HostElement>(
       }
     })
 
+    if (__COMPAT__) {
+      installCompatMount(app, context, render, hydrate)
+      installGlobalFilterMethod(app, context)
+      if (__DEV__) installLegacyConfigProperties(app.config)
+    }
+
     return app
   }
 }

packages/runtime-core/src/apiWatch.ts

@@ -18,7 +18,8 @@ import {
   NOOP,
   remove,
   isMap,
-  isSet
+  isSet,
+  isPlainObject
 } from '@vue/shared'
 import {
   currentInstance,
@@ -33,6 +34,9 @@ import {
 } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
+import { DeprecationTypes } from './compat/compatConfig'
+import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
+import { ObjectWatchOptionItem } from './componentOptions'
 
 export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void
 
@@ -217,6 +221,21 @@ function doWatch(
     __DEV__ && warnInvalidSource(source)
   }
 
+  // 2.x array mutation watch compat
+  if (__COMPAT__ && cb && !deep) {
+    const baseGetter = getter
+    getter = () => {
+      const val = baseGetter()
+      if (
+        isArray(val) &&
+        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+      ) {
+        traverse(val)
+      }
+      return val
+    }
+  }
+
   if (cb && deep) {
     const baseGetter = getter
     getter = () => traverse(baseGetter())
@@ -254,7 +273,14 @@ function doWatch(
     if (cb) {
       // watch(source, cb)
       const newValue = runner()
-      if (deep || forceTrigger || hasChanged(newValue, oldValue)) {
+      if (
+        deep ||
+        forceTrigger ||
+        hasChanged(newValue, oldValue) ||
+        (__COMPAT__ &&
+          isArray(newValue) &&
+          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
+      ) {
         // cleanup before running cb again
         if (cleanup) {
           cleanup()
@@ -329,7 +355,7 @@ function doWatch(
 export function instanceWatch(
   this: ComponentInternalInstance,
   source: string | Function,
-  cb: WatchCallback,
+  value: WatchCallback | ObjectWatchOptionItem,
   options?: WatchOptions
 ): WatchStopHandle {
   const publicThis = this.proxy as any
@@ -338,6 +364,13 @@ export function instanceWatch(
       ? createPathGetter(publicThis, source)
       : () => publicThis[source]
     : source.bind(publicThis)
+  let cb
+  if (isFunction(value)) {
+    cb = value
+  } else {
+    cb = value.handler as Function
+    options = value
+  }
   return doWatch(getter, cb.bind(publicThis), options, this)
 }
 
@@ -367,9 +400,9 @@ function traverse(value: unknown, seen: Set<unknown> = new Set()) {
     value.forEach((v: any) => {
       traverse(v, seen)
     })
-  } else {
+  } else if (isPlainObject(value)) {
     for (const key in value) {
-      traverse(value[key], seen)
+      traverse((value as any)[key], seen)
     }
   }
   return value

packages/runtime-core/src/compat/__tests__/global.spec.ts

@@ -0,0 +1,336 @@
+import Vue from '@vue/compat'
+import { effect, isReactive } from '@vue/reactivity'
+import {
+  DeprecationTypes,
+  deprecationData,
+  toggleDeprecationWarning
+} from '../compatConfig'
+
+beforeEach(() => {
+  toggleDeprecationWarning(false)
+  Vue.configureCompat({ MODE: 2 })
+})
+
+afterEach(() => {
+  Vue.configureCompat({ MODE: 3 })
+  toggleDeprecationWarning(false)
+})
+
+describe('GLOBAL_MOUNT', () => {
+  test('new Vue() with el', () => {
+    toggleDeprecationWarning(true)
+
+    const el = document.createElement('div')
+    el.innerHTML = `{{ msg }}`
+    new Vue({
+      el,
+      compatConfig: { GLOBAL_MOUNT: true },
+      data() {
+        return {
+          msg: 'hello'
+        }
+      }
+    })
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+    ).toHaveBeenWarned()
+    expect(el.innerHTML).toBe('hello')
+  })
+
+  test('new Vue() + $mount', () => {
+    const el = document.createElement('div')
+    el.innerHTML = `{{ msg }}`
+    new Vue({
+      data() {
+        return {
+          msg: 'hello'
+        }
+      }
+    }).$mount(el)
+    expect(el.innerHTML).toBe('hello')
+  })
+})
+
+describe('GLOBAL_MOUNT_CONTAINER', () => {
+  test('should warn', () => {
+    toggleDeprecationWarning(true)
+
+    const el = document.createElement('div')
+    el.innerHTML = `test`
+    el.setAttribute('v-bind:id', 'foo')
+    new Vue().$mount(el)
+    // warning only
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+    ).toHaveBeenWarned()
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT_CONTAINER].message
+    ).toHaveBeenWarned()
+  })
+})
+
+describe('GLOBAL_EXTEND', () => {
+  // https://github.com/vuejs/vue/blob/dev/test/unit/features/global-api/extend.spec.js
+  it('should correctly merge options', () => {
+    toggleDeprecationWarning(true)
+
+    const Test = Vue.extend({
+      name: 'test',
+      a: 1,
+      b: 2
+    })
+    expect(Test.options.a).toBe(1)
+    expect(Test.options.b).toBe(2)
+    expect(Test.super).toBe(Vue)
+    const t = new Test({
+      a: 2
+    })
+    expect(t.$options.a).toBe(2)
+    expect(t.$options.b).toBe(2)
+    // inheritance
+    const Test2 = Test.extend({
+      a: 2
+    })
+    expect(Test2.options.a).toBe(2)
+    expect(Test2.options.b).toBe(2)
+    const t2 = new Test2({
+      a: 3
+    })
+    expect(t2.$options.a).toBe(3)
+    expect(t2.$options.b).toBe(2)
+
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+    ).toHaveBeenWarned()
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_EXTEND].message
+    ).toHaveBeenWarned()
+  })
+
+  it('should work when used as components', () => {
+    const foo = Vue.extend({
+      template: '<span>foo</span>'
+    })
+    const bar = Vue.extend({
+      template: '<span>bar</span>'
+    })
+    const vm = new Vue({
+      template: '<div><foo></foo><bar></bar></div>',
+      components: { foo, bar }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
+  })
+
+  it('should merge lifecycle hooks', () => {
+    const calls: number[] = []
+    const A = Vue.extend({
+      created() {
+        calls.push(1)
+      }
+    })
+    const B = A.extend({
+      created() {
+        calls.push(2)
+      }
+    })
+    new B({
+      created() {
+        calls.push(3)
+      }
+    })
+    expect(calls).toEqual([1, 2, 3])
+  })
+
+  it('should not merge nested mixins created with Vue.extend', () => {
+    const A = Vue.extend({
+      created: () => {}
+    })
+    const B = Vue.extend({
+      mixins: [A],
+      created: () => {}
+    })
+    const C = Vue.extend({
+      extends: B,
+      created: () => {}
+    })
+    const D = Vue.extend({
+      mixins: [C],
+      created: () => {}
+    })
+    expect(D.options.created!.length).toBe(4)
+  })
+
+  it('should merge methods', () => {
+    const A = Vue.extend({
+      methods: {
+        a() {
+          return this.n
+        }
+      }
+    })
+    const B = A.extend({
+      methods: {
+        b() {
+          return this.n + 1
+        }
+      }
+    })
+    const b = new B({
+      data: () => ({ n: 0 }),
+      methods: {
+        c() {
+          return this.n + 2
+        }
+      }
+    }) as any
+    expect(b.a()).toBe(0)
+    expect(b.b()).toBe(1)
+    expect(b.c()).toBe(2)
+  })
+
+  it('should merge assets', () => {
+    const A = Vue.extend({
+      components: {
+        aa: {
+          template: '<div>A</div>'
+        }
+      }
+    })
+    const B = A.extend({
+      components: {
+        bb: {
+          template: '<div>B</div>'
+        }
+      }
+    })
+    const b = new B({
+      template: '<div><aa></aa><bb></bb></div>'
+    }).$mount()
+    expect(b.$el.innerHTML).toBe('<div>A</div><div>B</div>')
+  })
+
+  it('caching', () => {
+    const options = {
+      template: '<div></div>'
+    }
+    const A = Vue.extend(options)
+    const B = Vue.extend(options)
+    expect(A).toBe(B)
+  })
+
+  it('extended options should use different identify from parent', () => {
+    const A = Vue.extend({ computed: {} })
+    const B = A.extend()
+    B.options.computed.b = () => 'foo'
+    expect(B.options.computed).not.toBe(A.options.computed)
+    expect(A.options.computed.b).toBeUndefined()
+  })
+})
+
+describe('GLOBAL_PROTOTYPE', () => {
+  test('plain properties', () => {
+    toggleDeprecationWarning(true)
+    Vue.prototype.$test = 1
+    const vm = new Vue() as any
+    expect(vm.$test).toBe(1)
+    delete Vue.prototype.$test
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+    ).toHaveBeenWarned()
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_PROTOTYPE].message
+    ).toHaveBeenWarned()
+  })
+
+  test('method this context', () => {
+    Vue.prototype.$test = function() {
+      return this.msg
+    }
+    const vm = new Vue({
+      data() {
+        return { msg: 'method' }
+      }
+    }) as any
+    expect(vm.$test()).toBe('method')
+    delete Vue.prototype.$test
+  })
+
+  test('defined properties', () => {
+    Object.defineProperty(Vue.prototype, '$test', {
+      configurable: true,
+      get() {
+        return this.msg
+      }
+    })
+    const vm = new Vue({
+      data() {
+        return { msg: 'getter' }
+      }
+    }) as any
+    expect(vm.$test).toBe('getter')
+    delete Vue.prototype.$test
+  })
+
+  test('extended prototype', async () => {
+    const Foo = Vue.extend()
+    Foo.prototype.$test = 1
+    const vm = new Foo() as any
+    expect(vm.$test).toBe(1)
+    const plain = new Vue() as any
+    expect(plain.$test).toBeUndefined()
+  })
+})
+
+describe('GLOBAL_SET/DELETE', () => {
+  test('set', () => {
+    toggleDeprecationWarning(true)
+    const obj: any = {}
+    Vue.set(obj, 'foo', 1)
+    expect(obj.foo).toBe(1)
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_SET].message
+    ).toHaveBeenWarned()
+  })
+
+  test('delete', () => {
+    toggleDeprecationWarning(true)
+    const obj: any = { foo: 1 }
+    Vue.delete(obj, 'foo')
+    expect('foo' in obj).toBe(false)
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_DELETE].message
+    ).toHaveBeenWarned()
+  })
+})
+
+describe('GLOBAL_OBSERVABLE', () => {
+  test('should work', () => {
+    toggleDeprecationWarning(true)
+    const obj = Vue.observable({})
+    expect(isReactive(obj)).toBe(true)
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_OBSERVABLE].message
+    ).toHaveBeenWarned()
+  })
+})
+
+describe('GLOBAL_PRIVATE_UTIL', () => {
+  test('defineReactive', () => {
+    toggleDeprecationWarning(true)
+    const obj: any = {}
+    // @ts-ignore
+    Vue.util.defineReactive(obj, 'test', 1)
+
+    let n
+    effect(() => {
+      n = obj.test
+    })
+    expect(n).toBe(1)
+    obj.test++
+    expect(n).toBe(2)
+
+    expect(
+      deprecationData[DeprecationTypes.GLOBAL_PRIVATE_UTIL].message
+    ).toHaveBeenWarned()
+  })
+})

packages/runtime-core/src/compat/__tests__/globalConfig.spec.ts

@@ -0,0 +1,77 @@
+import Vue from '@vue/compat'
+import { toggleDeprecationWarning } from '../compatConfig'
+
+beforeEach(() => {
+  toggleDeprecationWarning(false)
+  Vue.configureCompat({ MODE: 2 })
+})
+
+afterEach(() => {
+  Vue.configureCompat({ MODE: 3 })
+  toggleDeprecationWarning(false)
+})
+
+function triggerEvent(
+  target: Element,
+  event: string,
+  process?: (e: any) => any
+) {
+  const e = document.createEvent('HTMLEvents')
+  e.initEvent(event, true, true)
+  if (process) process(e)
+  target.dispatchEvent(e)
+  return e
+}
+
+// only testing config options that affect runtime behavior.
+
+test('GLOBAL_KEY_CODES', () => {
+  Vue.config.keyCodes = {
+    foo: 86,
+    bar: [38, 87]
+  }
+
+  const onFoo = jest.fn()
+  const onBar = jest.fn()
+
+  const el = document.createElement('div')
+  new Vue({
+    el,
+    template: `<input type="text" @keyup.foo="onFoo" @keyup.bar="onBar">`,
+    methods: {
+      onFoo,
+      onBar
+    }
+  })
+
+  triggerEvent(el.children[0], 'keyup', e => {
+    e.key = '_'
+    e.keyCode = 86
+  })
+  expect(onFoo).toHaveBeenCalledTimes(1)
+  expect(onBar).toHaveBeenCalledTimes(0)
+
+  triggerEvent(el.children[0], 'keyup', e => {
+    e.key = '_'
+    e.keyCode = 38
+  })
+  expect(onFoo).toHaveBeenCalledTimes(1)
+  expect(onBar).toHaveBeenCalledTimes(1)
+
+  triggerEvent(el.children[0], 'keyup', e => {
+    e.key = '_'
+    e.keyCode = 87
+  })
+  expect(onFoo).toHaveBeenCalledTimes(1)
+  expect(onBar).toHaveBeenCalledTimes(2)
+})
+
+test('GLOBAL_IGNORED_ELEMENTS', () => {
+  Vue.config.ignoredElements = [/^v-/, 'foo']
+  const el = document.createElement('div')
+  new Vue({
+    el,
+    template: `<v-foo/><foo/>`
+  })
+  expect(el.innerHTML).toBe(`<v-foo></v-foo><foo></foo>`)
+})

packages/runtime-core/src/compat/__tests__/renderFn.spec.ts

@@ -0,0 +1,178 @@
+import { ShapeFlags } from '@vue/shared/src'
+import { createComponentInstance } from '../../component'
+import { setCurrentRenderingInstance } from '../../componentRenderContext'
+import { DirectiveBinding } from '../../directives'
+import { createVNode } from '../../vnode'
+import { compatH as h } from '../renderFn'
+
+describe('compat: render function', () => {
+  const mockDir = {}
+  const mockChildComp = {}
+  const mockComponent = {
+    directives: {
+      mockDir
+    },
+    components: {
+      foo: mockChildComp
+    }
+  }
+  const mockInstance = createComponentInstance(
+    createVNode(mockComponent),
+    null,
+    null
+  )
+  beforeEach(() => {
+    setCurrentRenderingInstance(mockInstance)
+  })
+  afterEach(() => {
+    setCurrentRenderingInstance(null)
+  })
+
+  test('string component lookup', () => {
+    expect(h('foo')).toMatchObject({
+      type: mockChildComp
+    })
+  })
+
+  test('class / style / attrs / domProps / props', () => {
+    expect(
+      h('div', {
+        class: 'foo',
+        style: { color: 'red' },
+        attrs: {
+          id: 'foo'
+        },
+        domProps: {
+          innerHTML: 'hi'
+        },
+        props: {
+          myProp: 'foo'
+        }
+      })
+    ).toMatchObject({
+      props: {
+        class: 'foo',
+        style: { color: 'red' },
+        id: 'foo',
+        innerHTML: 'hi',
+        myProp: 'foo'
+      }
+    })
+  })
+
+  test('staticClass + class', () => {
+    expect(
+      h('div', {
+        class: { foo: true },
+        staticClass: 'bar'
+      })
+    ).toMatchObject({
+      props: {
+        class: 'bar foo'
+      }
+    })
+  })
+
+  test('staticStyle + style', () => {
+    expect(
+      h('div', {
+        style: { color: 'red' },
+        staticStyle: { fontSize: '14px' }
+      })
+    ).toMatchObject({
+      props: {
+        style: {
+          color: 'red',
+          fontSize: '14px'
+        }
+      }
+    })
+  })
+
+  test('on / nativeOn', () => {
+    const fn = () => {}
+    expect(
+      h('div', {
+        on: {
+          click: fn,
+          fooBar: fn
+        },
+        nativeOn: {
+          click: fn,
+          'bar-baz': fn
+        }
+      })
+    ).toMatchObject({
+      props: {
+        onClick: fn, // should dedupe
+        onFooBar: fn,
+        'onBar-baz': fn
+      }
+    })
+  })
+
+  test('directives', () => {
+    expect(
+      h('div', {
+        directives: [
+          {
+            name: 'mock-dir',
+            value: '2',
+            // expression: '1 + 1',
+            arg: 'foo',
+            modifiers: {
+              bar: true
+            }
+          }
+        ]
+      })
+    ).toMatchObject({
+      dirs: [
+        {
+          dir: mockDir,
+          instance: mockInstance.proxy,
+          value: '2',
+          oldValue: void 0,
+          arg: 'foo',
+          modifiers: {
+            bar: true
+          }
+        }
+      ] as DirectiveBinding[]
+    })
+  })
+
+  test('scopedSlots', () => {
+    const scopedSlots = {
+      default() {}
+    }
+    const vnode = h(mockComponent, {
+      scopedSlots
+    })
+    expect(vnode).toMatchObject({
+      children: scopedSlots
+    })
+    expect('scopedSlots' in vnode.props!).toBe(false)
+    expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
+  })
+
+  test('legacy named slot', () => {
+    const vnode = h(mockComponent, [
+      'text',
+      h('div', { slot: 'foo' }, 'one'),
+      h('div', { slot: 'bar' }, 'two'),
+      h('div', { slot: 'foo' }, 'three'),
+      h('div', 'four')
+    ])
+    expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
+    const slots = vnode.children as any
+
+    // default
+    expect(slots.default()).toMatchObject(['text', { children: 'four' }])
+    expect(slots.foo()).toMatchObject([
+      { children: 'one' },
+      { children: 'three' }
+    ])
+    expect(slots.bar()).toMatchObject([{ children: 'two' }])
+  })
+})

packages/runtime-core/src/compat/attrsFallthrough.ts

@@ -0,0 +1,27 @@
+import { isOn } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { DeprecationTypes, isCompatEnabled } from './compatConfig'
+
+export function shouldSkipAttr(
+  key: string,
+  value: any,
+  instance: ComponentInternalInstance
+): boolean {
+  if (
+    (key === 'class' || key === 'style') &&
+    isCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, instance)
+  ) {
+    return true
+  }
+  if (
+    isOn(key) &&
+    isCompatEnabled(DeprecationTypes.INSTANCE_LISTENERS, instance)
+  ) {
+    return true
+  }
+  // vue-router
+  if (key.startsWith('routerView') || key === 'registerRouteInstance') {
+    return true
+  }
+  return false
+}

packages/runtime-core/src/compat/compatConfig.ts

@@ -0,0 +1,636 @@
+import { extend, hasOwn, isArray } from '@vue/shared'
+import {
+  ComponentInternalInstance,
+  ComponentOptions,
+  formatComponentName,
+  getComponentName,
+  getCurrentInstance,
+  isRuntimeOnly
+} from '../component'
+import { warn } from '../warning'
+
+export const enum DeprecationTypes {
+  GLOBAL_MOUNT = 'GLOBAL_MOUNT',
+  GLOBAL_MOUNT_CONTAINER = 'GLOBAL_MOUNT_CONTAINER',
+  GLOBAL_EXTEND = 'GLOBAL_EXTEND',
+  GLOBAL_PROTOTYPE = 'GLOBAL_PROTOTYPE',
+  GLOBAL_SET = 'GLOBAL_SET',
+  GLOBAL_DELETE = 'GLOBAL_DELETE',
+  GLOBAL_OBSERVABLE = 'GLOBAL_OBSERVABLE',
+  GLOBAL_PRIVATE_UTIL = 'GLOBAL_PRIVATE_UTIL',
+
+  CONFIG_SILENT = 'CONFIG_SILENT',
+  CONFIG_DEVTOOLS = 'CONFIG_DEVTOOLS',
+  CONFIG_KEY_CODES = 'CONFIG_KEY_CODES',
+  CONFIG_PRODUCTION_TIP = 'CONFIG_PRODUCTION_TIP',
+  CONFIG_IGNORED_ELEMENTS = 'CONFIG_IGNORED_ELEMENTS',
+  CONFIG_WHITESPACE = 'CONFIG_WHITESPACE',
+
+  INSTANCE_SET = 'INSTANCE_SET',
+  INSTANCE_DELETE = 'INSTANCE_DELETE',
+  INSTANCE_DESTROY = 'INSTANCE_DESTROY',
+  INSTANCE_EVENT_EMITTER = 'INSTANCE_EVENT_EMITTER',
+  INSTANCE_EVENT_HOOKS = 'INSTANCE_EVENT_HOOKS',
+  INSTANCE_CHILDREN = 'INSTANCE_CHILDREN',
+  INSTANCE_LISTENERS = 'INSTANCE_LISTENERS',
+  INSTANCE_SCOPED_SLOTS = 'INSTANCE_SCOPED_SLOTS',
+  INSTANCE_ATTRS_CLASS_STYLE = 'INSTANCE_ATTRS_CLASS_STYLE',
+
+  OPTIONS_DATA_FN = 'OPTIONS_DATA_FN',
+  OPTIONS_DATA_MERGE = 'OPTIONS_DATA_MERGE',
+  OPTIONS_BEFORE_DESTROY = 'OPTIONS_BEFORE_DESTROY',
+  OPTIONS_DESTROYED = 'OPTIONS_DESTROYED',
+
+  WATCH_ARRAY = 'WATCH_ARRAY',
+  PROPS_DEFAULT_THIS = 'PROPS_DEFAULT_THIS',
+
+  V_FOR_REF = 'V_FOR_REF',
+  V_ON_KEYCODE_MODIFIER = 'V_ON_KEYCODE_MODIFIER',
+  CUSTOM_DIR = 'CUSTOM_DIR',
+
+  ATTR_FALSE_VALUE = 'ATTR_FALSE_VALUE',
+  ATTR_ENUMERATED_COERSION = 'ATTR_ENUMERATED_COERSION',
+
+  TRANSITION_CLASSES = 'TRANSITION_CLASSES',
+  TRANSITION_GROUP_ROOT = 'TRANSITION_GROUP_ROOT',
+
+  COMPONENT_ASYNC = 'COMPONENT_ASYNC',
+  COMPONENT_FUNCTIONAL = 'COMPONENT_FUNCTIONAL',
+  COMPONENT_V_MODEL = 'COMPONENT_V_MODEL',
+
+  RENDER_FUNCTION = 'RENDER_FUNCTION',
+
+  FILTERS = 'FILTERS',
+
+  PRIVATE_APIS = 'PRIVATE_APIS'
+}
+
+type DeprecationData = {
+  message: string | ((...args: any[]) => string)
+  link?: string
+}
+
+export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
+  [DeprecationTypes.GLOBAL_MOUNT]: {
+    message:
+      `The global app bootstrapping API has changed: vm.$mount() and the "el" ` +
+      `option have been removed. Use createApp(RootComponent).mount() instead.`,
+    link: `https://v3.vuejs.org/guide/migration/global-api.html#mounting-app-instance`
+  },
+
+  [DeprecationTypes.GLOBAL_MOUNT_CONTAINER]: {
+    message:
+      `Vue detected directives on the mount container. ` +
+      `In Vue 3, the container is no longer considered part of the template ` +
+      `and will not be processed/replaced.`,
+    link: `https://v3.vuejs.org/guide/migration/mount-changes.html`
+  },
+
+  [DeprecationTypes.GLOBAL_EXTEND]: {
+    message:
+      `Vue.extend() has been removed in Vue 3. ` +
+      `Use defineComponent() instead.`,
+    link: `https://v3.vuejs.org/api/global-api.html#definecomponent`
+  },
+
+  [DeprecationTypes.GLOBAL_PROTOTYPE]: {
+    message:
+      `Vue.prototype is no longer available in Vue 3. ` +
+      `Use config.globalProperties instead.`,
+    link: `https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties`
+  },
+
+  [DeprecationTypes.GLOBAL_SET]: {
+    message:
+      `Vue.set() has been removed as it is no longer needed in Vue 3. ` +
+      `Simply use native JavaScript mutations.`
+  },
+
+  [DeprecationTypes.GLOBAL_DELETE]: {
+    message:
+      `Vue.delete() has been removed as it is no longer needed in Vue 3. ` +
+      `Simply use native JavaScript mutations.`
+  },
+
+  [DeprecationTypes.GLOBAL_OBSERVABLE]: {
+    message:
+      `Vue.observable() has been removed. ` +
+      `Use \`import { reactive } from "vue"\` from Composition API instead.`,
+    link: `https://v3.vuejs.org/api/basic-reactivity.html`
+  },
+
+  [DeprecationTypes.GLOBAL_PRIVATE_UTIL]: {
+    message:
+      `Vue.util has been removed. Please refactor to avoid its usage ` +
+      `since it was an internal API even in Vue 2.`
+  },
+
+  [DeprecationTypes.CONFIG_SILENT]: {
+    message:
+      `config.silent has been removed because it is not good practice to ` +
+      `intentionally suppress warnings. You can use your browser console's ` +
+      `filter features to focus on relevant messages.`
+  },
+
+  [DeprecationTypes.CONFIG_DEVTOOLS]: {
+    message:
+      `config.devtools has been removed. To enable devtools for ` +
+      `production, configure the __VUE_PROD_DEVTOOLS__ compile-time flag.`,
+    link: `https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags`
+  },
+
+  [DeprecationTypes.CONFIG_KEY_CODES]: {
+    message:
+      `config.keyCodes has been removed. ` +
+      `In Vue 3, you can directly use the kebab-case key names as v-on modifiers.`,
+    link: `https://v3.vuejs.org/guide/migration/keycode-modifiers.html`
+  },
+
+  [DeprecationTypes.CONFIG_PRODUCTION_TIP]: {
+    message: `config.productionTip has been removed.`,
+    link: `https://v3.vuejs.org/guide/migration/global-api.html#config-productiontip-removed`
+  },
+
+  [DeprecationTypes.CONFIG_IGNORED_ELEMENTS]: {
+    message: () => {
+      let msg = `config.ignoredElements has been removed.`
+      if (isRuntimeOnly()) {
+        msg += ` Pass the "isCustomElement" option to @vue/compiler-dom instead.`
+      } else {
+        msg += ` Use config.isCustomElement instead.`
+      }
+      return msg
+    },
+    link: `https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-iscustomelement`
+  },
+
+  [DeprecationTypes.CONFIG_WHITESPACE]: {
+    // this warning is only relevant in the full build when using runtime
+    // compilation, so it's put in the runtime compatConfig list.
+    message:
+      `Vue 3 compiler's whitespace option will default to "condense" instead of ` +
+      `"preserve". To suppress this warning, provide an explicit value for ` +
+      `\`config.compilerOptions.whitespace\`.`
+  },
+
+  [DeprecationTypes.INSTANCE_SET]: {
+    message:
+      `vm.$set() has been removed as it is no longer needed in Vue 3. ` +
+      `Simply use native JavaScript mutations.`
+  },
+
+  [DeprecationTypes.INSTANCE_DELETE]: {
+    message:
+      `vm.$delete() has been removed as it is no longer needed in Vue 3. ` +
+      `Simply use native JavaScript mutations.`
+  },
+
+  [DeprecationTypes.INSTANCE_DESTROY]: {
+    message: `vm.$destroy() has been removed. Use app.unmount() instead.`,
+    link: `https://v3.vuejs.org/api/application-api.html#unmount`
+  },
+
+  [DeprecationTypes.INSTANCE_EVENT_EMITTER]: {
+    message:
+      `vm.$on/$once/$off() have been removed. ` +
+      `Use an external event emitter library instead.`,
+    link: `https://v3.vuejs.org/guide/migration/events-api.html`
+  },
+
+  [DeprecationTypes.INSTANCE_EVENT_HOOKS]: {
+    message: event =>
+      `"${event}" lifecycle events are no longer supported. From templates, ` +
+      `use the "vnode" prefix instead of "hook:". For example, @${event} ` +
+      `should be changed to @vnode-${event.slice(5)}. ` +
+      `From JavaScript, use Composition API to dynamically register lifecycle ` +
+      `hooks.`,
+    link: `https://v3.vuejs.org/guide/migration/vnode-lifecycle-events.html`
+  },
+
+  [DeprecationTypes.INSTANCE_CHILDREN]: {
+    message:
+      `vm.$children has been removed. Consider refactoring your logic ` +
+      `to avoid relying on direct access to child components.`,
+    link: `https://v3.vuejs.org/guide/migration/children.html`
+  },
+
+  [DeprecationTypes.INSTANCE_LISTENERS]: {
+    message:
+      `vm.$listeners has been removed. In Vue 3, parent v-on listeners are ` +
+      `included in vm.$attrs and it is no longer necessary to separately use ` +
+      `v-on="$listeners" if you are already using v-bind="$attrs". ` +
+      `(Note: the Vue 3 behavior only applies if this compat config is disabled)`,
+    link: `https://v3.vuejs.org/guide/migration/listeners-removed.html`
+  },
+
+  [DeprecationTypes.INSTANCE_SCOPED_SLOTS]: {
+    message: `vm.$scopedSlots has been removed. Use vm.$slots instead.`,
+    link: `https://v3.vuejs.org/guide/migration/slots-unification.html`
+  },
+
+  [DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]: {
+    message: componentName =>
+      `Component <${componentName}> has \`inheritAttrs: false\` but is ` +
+      `relying on class/style fallthrough from parent. In Vue 3, class/style ` +
+      `are now included in $attrs and will no longer fallthrough when ` +
+      `inheritAttrs is false. If you are already using v-bind="$attrs" on ` +
+      `component root it should render the same end result. ` +
+      `If you are binding $attrs to a non-root element and expecting ` +
+      `class/style to fallthrough on root, you will need to now manually bind ` +
+      `them on root via :class="$attrs.class".`,
+    link: `https://v3.vuejs.org/guide/migration/attrs-includes-class-style.html`
+  },
+
+  [DeprecationTypes.OPTIONS_DATA_FN]: {
+    message:
+      `The "data" option can no longer be a plain object. ` +
+      `Always use a function.`,
+    link: `https://v3.vuejs.org/guide/migration/data-option.html`
+  },
+
+  [DeprecationTypes.OPTIONS_DATA_MERGE]: {
+    message: (key: string) =>
+      `Detected conflicting key "${key}" when merging data option values. ` +
+      `In Vue 3, data keys are merged shallowly and will override one another.`,
+    link: `https://v3.vuejs.org/guide/migration/data-option.html#mixin-merge-behavior-change`
+  },
+
+  [DeprecationTypes.OPTIONS_BEFORE_DESTROY]: {
+    message: `\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`
+  },
+
+  [DeprecationTypes.OPTIONS_DESTROYED]: {
+    message: `\`destroyed\` has been renamed to \`unmounted\`.`
+  },
+
+  [DeprecationTypes.WATCH_ARRAY]: {
+    message:
+      `"watch" option or vm.$watch on an array value will no longer ` +
+      `trigger on array mutation unless the "deep" option is specified. ` +
+      `If current usage is intended, you can disable the compat behavior and ` +
+      `suppress this warning with:` +
+      `\n\n  configureCompat({ ${DeprecationTypes.WATCH_ARRAY}: false })\n`,
+    link: `https://v3.vuejs.org/guide/migration/watch.html`
+  },
+
+  [DeprecationTypes.PROPS_DEFAULT_THIS]: {
+    message: (key: string) =>
+      `props default value function no longer has access to "this". The compat ` +
+      `build only offers access to this.$options.` +
+      `(found in prop "${key}")`,
+    link: `https://v3.vuejs.org/guide/migration/props-default-this.html`
+  },
+
+  [DeprecationTypes.CUSTOM_DIR]: {
+    message: (legacyHook: string, newHook: string) =>
+      `Custom directive hook "${legacyHook}" has been removed. ` +
+      `Use "${newHook}" instead.`,
+    link: `https://v3.vuejs.org/guide/migration/custom-directives.html`
+  },
+
+  [DeprecationTypes.V_FOR_REF]: {
+    message:
+      `Ref usage on v-for no longer creates array ref values in Vue 3. ` +
+      `Consider using function refs or refactor to avoid ref usage altogether.`,
+    link: `https://v3.vuejs.org/guide/migration/array-refs.html`
+  },
+
+  [DeprecationTypes.V_ON_KEYCODE_MODIFIER]: {
+    message:
+      `Using keyCode as v-on modifier is no longer supported. ` +
+      `Use kebab-case key name modifiers instead.`,
+    link: `https://v3.vuejs.org/guide/migration/keycode-modifiers.html`
+  },
+
+  [DeprecationTypes.ATTR_FALSE_VALUE]: {
+    message: (name: string) =>
+      `Attribute "${name}" with v-bind value \`false\` will render ` +
+      `${name}="false" instead of removing it in Vue 3. To remove the attribute, ` +
+      `use \`null\` or \`undefined\` instead. If the usage is intended, ` +
+      `you can disable the compat behavior and suppress this warning with:` +
+      `\n\n  configureCompat({ ${
+        DeprecationTypes.ATTR_FALSE_VALUE
+      }: false })\n`,
+    link: `https://v3.vuejs.org/guide/migration/attribute-coercion.html`
+  },
+
+  [DeprecationTypes.ATTR_ENUMERATED_COERSION]: {
+    message: (name: string, value: any, coerced: string) =>
+      `Enumerated attribute "${name}" with v-bind value \`${value}\` will ` +
+      `${
+        value === null ? `be removed` : `render the value as-is`
+      } instead of coercing the value to "${coerced}" in Vue 3. ` +
+      `Always use explicit "true" or "false" values for enumerated attributes. ` +
+      `If the usage is intended, ` +
+      `you can disable the compat behavior and suppress this warning with:` +
+      `\n\n  configureCompat({ ${
+        DeprecationTypes.ATTR_ENUMERATED_COERSION
+      }: false })\n`,
+    link: `https://v3.vuejs.org/guide/migration/attribute-coercion.html`
+  },
+
+  [DeprecationTypes.TRANSITION_CLASSES]: {
+    message: `` // this feature cannot be runtime-detected
+  },
+
+  [DeprecationTypes.TRANSITION_GROUP_ROOT]: {
+    message:
+      `<TransitionGroup> no longer renders a root <span> element by ` +
+      `default if no "tag" prop is specified. If you do not rely on the span ` +
+      `for styling, you can disable the compat behavior and suppress this ` +
+      `warning with:` +
+      `\n\n  configureCompat({ ${
+        DeprecationTypes.TRANSITION_GROUP_ROOT
+      }: false })\n`,
+    link: `https://v3.vuejs.org/guide/migration/transition-group.html`
+  },
+
+  [DeprecationTypes.COMPONENT_ASYNC]: {
+    message: (comp: any) => {
+      const name = getComponentName(comp)
+      return (
+        `Async component${
+          name ? ` <${name}>` : `s`
+        } should be explicitly created via \`defineAsyncComponent()\` ` +
+        `in Vue 3. Plain functions will be treated as functional components in ` +
+        `non-compat build. If you have already migrated all async component ` +
+        `usage and intend to use plain functions for functional components, ` +
+        `you can disable the compat behavior and suppress this ` +
+        `warning with:` +
+        `\n\n  configureCompat({ ${
+          DeprecationTypes.COMPONENT_ASYNC
+        }: false })\n`
+      )
+    },
+    link: `https://v3.vuejs.org/guide/migration/async-components.html`
+  },
+
+  [DeprecationTypes.COMPONENT_FUNCTIONAL]: {
+    message: (comp: any) => {
+      const name = getComponentName(comp)
+      return (
+        `Functional component${
+          name ? ` <${name}>` : `s`
+        } should be defined as a plain function in Vue 3. The "functional" ` +
+        `option has been removed. NOTE: Before migrating to use plain ` +
+        `functions for functional components, first make sure that all async ` +
+        `components usage have been migrated and its compat behavior has ` +
+        `been disabled.`
+      )
+    },
+    link: `https://v3.vuejs.org/guide/migration/functional-components.html`
+  },
+
+  [DeprecationTypes.COMPONENT_V_MODEL]: {
+    message: (comp: ComponentOptions) => {
+      const configMsg =
+        `opt-in to ` +
+        `Vue 3 behavior on a per-component basis with \`compatConfig: { ${
+          DeprecationTypes.COMPONENT_V_MODEL
+        }: false }\`.`
+      if (
+        comp.props && isArray(comp.props)
+          ? comp.props.includes('modelValue')
+          : hasOwn(comp.props, 'modelValue')
+      ) {
+        return (
+          `Component delcares "modelValue" prop, which is Vue 3 usage, but ` +
+          `is running under Vue 2 compat v-model behavior. You can ${configMsg}`
+        )
+      }
+      return (
+        `v-model usage on component has changed in Vue 3. Component that expects ` +
+        `to work with v-model should now use the "modelValue" prop and emit the ` +
+        `"update:modelValue" event. You can update the usage and then ${configMsg}`
+      )
+    },
+    link: `https://v3.vuejs.org/guide/migration/v-model.html`
+  },
+
+  [DeprecationTypes.RENDER_FUNCTION]: {
+    message:
+      `Vue 3's render function API has changed. ` +
+      `You can opt-in to the new API with:` +
+      `\n\n  configureCompat({ ${
+        DeprecationTypes.RENDER_FUNCTION
+      }: false })\n` +
+      `\n  (This can also be done per-component via the "compatConfig" option.)`,
+    link: `https://v3.vuejs.org/guide/migration/render-function-api.html`
+  },
+
+  [DeprecationTypes.FILTERS]: {
+    message:
+      `filters have been removed in Vue 3. ` +
+      `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
+      `Use method calls or computed properties instead.`,
+    link: `https://v3.vuejs.org/guide/migration/filters.html`
+  },
+
+  [DeprecationTypes.PRIVATE_APIS]: {
+    message: name =>
+      `"${name}" is a Vue 2 private API that no longer exists in Vue 3. ` +
+      `If you are seeing this warning only due to a dependency, you can ` +
+      `suppress this warning via { PRIVATE_APIS: 'supress-warning' }.`
+  }
+}
+
+const instanceWarned: Record<string, true> = Object.create(null)
+const warnCount: Record<string, number> = Object.create(null)
+
+// test only
+let warningEnabled = true
+
+export function toggleDeprecationWarning(flag: boolean) {
+  warningEnabled = flag
+}
+
+export function warnDeprecation(
+  key: DeprecationTypes,
+  instance: ComponentInternalInstance | null,
+  ...args: any[]
+) {
+  if (!__DEV__) {
+    return
+  }
+  if (__TEST__ && !warningEnabled) {
+    return
+  }
+
+  instance = instance || getCurrentInstance()
+
+  // check user config
+  const config = getCompatConfigForKey(key, instance)
+  if (config === 'suppress-warning') {
+    return
+  }
+
+  const dupKey = key + args.join('')
+  let compId: string | number | null =
+    instance && formatComponentName(instance, instance.type)
+  if (compId === 'Anonymous' && instance) {
+    compId = instance.uid
+  }
+
+  // skip if the same warning is emitted for the same component type
+  const componentDupKey = dupKey + compId
+  if (!__TEST__ && componentDupKey in instanceWarned) {
+    return
+  }
+  instanceWarned[componentDupKey] = true
+
+  // same warning, but different component. skip the long message and just
+  // log the key and count.
+  if (!__TEST__ && dupKey in warnCount) {
+    warn(`(deprecation ${key}) (${++warnCount[dupKey] + 1})`)
+    return
+  }
+
+  warnCount[dupKey] = 0
+
+  const { message, link } = deprecationData[key]
+  warn(
+    `(deprecation ${key}) ${
+      typeof message === 'function' ? message(...args) : message
+    }${link ? `\n  Details: ${link}` : ``}`
+  )
+  if (!isCompatEnabled(key, instance)) {
+    console.error(
+      `^ The above deprecation's compat behavior is disabled and will likely ` +
+        `lead to runtime errors.`
+    )
+  }
+}
+
+export type CompatConfig = Partial<
+  Record<DeprecationTypes, boolean | 'suppress-warning'>
+> & {
+  MODE?: 2 | 3
+}
+
+export const globalCompatConfig: CompatConfig = {
+  MODE: 2
+}
+
+export function configureCompat(config: CompatConfig) {
+  if (__DEV__) {
+    validateCompatConfig(config)
+  }
+  extend(globalCompatConfig, config)
+}
+
+const seenConfigObjects = /*#__PURE__*/ new WeakSet<CompatConfig>()
+const warnedInvalidKeys: Record<string, boolean> = {}
+
+// dev only
+export function validateCompatConfig(config: CompatConfig) {
+  if (seenConfigObjects.has(config)) {
+    return
+  }
+  seenConfigObjects.add(config)
+
+  for (const key of Object.keys(config)) {
+    if (
+      key !== 'MODE' &&
+      !(key in deprecationData) &&
+      !(key in warnedInvalidKeys)
+    ) {
+      if (key.startsWith('COMPILER_')) {
+        if (isRuntimeOnly()) {
+          warn(
+            `Depreaction config "${key}" is compiler-specific and you are ` +
+              `running a runtime-only build of Vue. This deprecation should be ` +
+              `configured via compiler options in your build setup instead.`
+            // TODO link to migration build docs on build setup
+          )
+        }
+      } else {
+        warn(`Invalid deprecation config "${key}".`)
+      }
+      warnedInvalidKeys[key] = true
+    }
+  }
+}
+
+export function getCompatConfigForKey(
+  key: DeprecationTypes | 'MODE',
+  instance: ComponentInternalInstance | null
+) {
+  const instanceConfig =
+    instance && (instance.type as ComponentOptions).compatConfig
+  if (instanceConfig && key in instanceConfig) {
+    return instanceConfig[key]
+  }
+  return globalCompatConfig[key]
+}
+
+export function isCompatEnabled(
+  key: DeprecationTypes,
+  instance: ComponentInternalInstance | null
+): boolean {
+  // skip compat for built-in components
+  if (instance && instance.type.__isBuiltIn) {
+    return false
+  }
+
+  const mode = getCompatConfigForKey('MODE', instance) || 2
+  const val = getCompatConfigForKey(key, instance)
+  if (mode === 2) {
+    return val !== false
+  } else {
+    return val === true || val === 'suppress-warning'
+  }
+}
+
+/**
+ * Use this for features that are completely removed in non-compat build.
+ */
+export function assertCompatEnabled(
+  key: DeprecationTypes,
+  instance: ComponentInternalInstance | null,
+  ...args: any[]
+) {
+  if (!isCompatEnabled(key, instance)) {
+    throw new Error(`${key} compat has been disabled.`)
+  } else if (__DEV__) {
+    warnDeprecation(key, instance, ...args)
+  }
+}
+
+/**
+ * Use this for features where legacy usage is still possible, but will likely
+ * lead to runtime error if compat is disabled. (warn in all cases)
+ */
+export function softAssertCompatEnabled(
+  key: DeprecationTypes,
+  instance: ComponentInternalInstance | null,
+  ...args: any[]
+) {
+  if (__DEV__) {
+    warnDeprecation(key, instance, ...args)
+  }
+  return isCompatEnabled(key, instance)
+}
+
+/**
+ * Use this for features with the same syntax but with mutually exclusive
+ * behavior in 2 vs 3. Only warn if compat is enabled.
+ * e.g. render function
+ */
+export function checkCompatEnabled(
+  key: DeprecationTypes,
+  instance: ComponentInternalInstance | null,
+  ...args: any[]
+) {
+  const enabled = isCompatEnabled(key, instance)
+  if (__DEV__ && enabled) {
+    warnDeprecation(key, instance, ...args)
+  }
+  return enabled
+}
+
+// run tests in v3 mode by default
+if (__TEST__) {
+  configureCompat({
+    MODE: 3
+  })
+}

packages/runtime-core/src/compat/component.ts

@@ -0,0 +1,164 @@
+import { isArray, isFunction, isObject, isPromise } from '@vue/shared'
+import { defineAsyncComponent } from '../apiAsyncComponent'
+import {
+  Component,
+  ComponentInternalInstance,
+  ComponentOptions,
+  FunctionalComponent,
+  getCurrentInstance
+} from '../component'
+import { resolveInjections } from '../componentOptions'
+import { InternalSlots } from '../componentSlots'
+import { isVNode } from '../vnode'
+import {
+  checkCompatEnabled,
+  softAssertCompatEnabled,
+  DeprecationTypes
+} from './compatConfig'
+import { getCompatListeners } from './instanceListeners'
+import { compatH } from './renderFn'
+
+export function convertLegacyComponent(
+  comp: any,
+  instance: ComponentInternalInstance | null
+): Component {
+  if (comp.__isBuiltIn) {
+    return comp
+  }
+
+  // 2.x constructor
+  if (isFunction(comp) && comp.cid) {
+    comp = comp.options
+  }
+
+  // 2.x async component
+  if (
+    isFunction(comp) &&
+    checkCompatEnabled(DeprecationTypes.COMPONENT_ASYNC, instance, comp)
+  ) {
+    // since after disabling this, plain functions are still valid usage, do not
+    // use softAssert here.
+    return convertLegacyAsyncComponent(comp)
+  }
+
+  // 2.x functional component
+  if (
+    isObject(comp) &&
+    comp.functional &&
+    softAssertCompatEnabled(
+      DeprecationTypes.COMPONENT_FUNCTIONAL,
+      instance,
+      comp
+    )
+  ) {
+    return convertLegacyFunctionalComponent(comp)
+  }
+
+  return comp
+}
+
+interface LegacyAsyncOptions {
+  component: Promise<Component>
+  loading?: Component
+  error?: Component
+  delay?: number
+  timeout?: number
+}
+
+type LegacyAsyncReturnValue = Promise<Component> | LegacyAsyncOptions
+
+type LegacyAsyncComponent = (
+  resolve?: (res: LegacyAsyncReturnValue) => void,
+  reject?: (reason?: any) => void
+) => LegacyAsyncReturnValue | undefined
+
+const normalizedAsyncComponentMap = new Map<LegacyAsyncComponent, Component>()
+
+function convertLegacyAsyncComponent(comp: LegacyAsyncComponent) {
+  if (normalizedAsyncComponentMap.has(comp)) {
+    return normalizedAsyncComponentMap.get(comp)!
+  }
+
+  // we have to call the function here due to how v2's API won't expose the
+  // options until we call it
+  let resolve: (res: LegacyAsyncReturnValue) => void
+  let reject: (reason?: any) => void
+  const fallbackPromise = new Promise<Component>((r, rj) => {
+    ;(resolve = r), (reject = rj)
+  })
+
+  const res = comp(resolve!, reject!)
+
+  let converted: Component
+  if (isPromise(res)) {
+    converted = defineAsyncComponent(() => res)
+  } else if (isObject(res) && !isVNode(res) && !isArray(res)) {
+    converted = defineAsyncComponent({
+      loader: () => res.component,
+      loadingComponent: res.loading,
+      errorComponent: res.error,
+      delay: res.delay,
+      timeout: res.timeout
+    })
+  } else if (res == null) {
+    converted = defineAsyncComponent(() => fallbackPromise)
+  } else {
+    converted = comp as any // probably a v3 functional comp
+  }
+  normalizedAsyncComponentMap.set(comp, converted)
+  return converted
+}
+
+const normalizedFunctionalComponentMap = new Map<
+  ComponentOptions,
+  FunctionalComponent
+>()
+
+export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
+  get(target, key: string) {
+    const slot = target[key]
+    return slot && slot()
+  }
+}
+
+function convertLegacyFunctionalComponent(comp: ComponentOptions) {
+  if (normalizedFunctionalComponentMap.has(comp)) {
+    return normalizedFunctionalComponentMap.get(comp)!
+  }
+
+  const legacyFn = comp.render as any
+
+  const Func: FunctionalComponent = (props, ctx) => {
+    const instance = getCurrentInstance()!
+
+    const legacyCtx = {
+      props,
+      children: instance.vnode.children || [],
+      data: instance.vnode.props || {},
+      scopedSlots: ctx.slots,
+      parent: instance.parent && instance.parent.proxy,
+      slots() {
+        return new Proxy(ctx.slots, legacySlotProxyHandlers)
+      },
+      get listeners() {
+        return getCompatListeners(instance)
+      },
+      get injections() {
+        if (comp.inject) {
+          const injections = {}
+          resolveInjections(comp.inject, {})
+          return injections
+        }
+        return {}
+      }
+    }
+    return legacyFn(compatH, legacyCtx)
+  }
+  Func.props = comp.props
+  Func.displayName = comp.name
+  // v2 functional components do not inherit attrs
+  Func.inheritAttrs = false
+
+  normalizedFunctionalComponentMap.set(comp, Func)
+  return Func
+}

packages/runtime-core/src/compat/customDirective.ts

@@ -0,0 +1,60 @@
+import { isArray } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { ObjectDirective, DirectiveHook } from '../directives'
+import { softAssertCompatEnabled, DeprecationTypes } from './compatConfig'
+
+export interface LegacyDirective {
+  bind?: DirectiveHook
+  inserted?: DirectiveHook
+  update?: DirectiveHook
+  componentUpdated?: DirectiveHook
+  unbind?: DirectiveHook
+}
+
+const legacyDirectiveHookMap: Partial<
+  Record<
+    keyof ObjectDirective,
+    keyof LegacyDirective | (keyof LegacyDirective)[]
+  >
+> = {
+  beforeMount: 'bind',
+  mounted: 'inserted',
+  updated: ['update', 'componentUpdated'],
+  unmounted: 'unbind'
+}
+
+export function mapCompatDirectiveHook(
+  name: keyof ObjectDirective,
+  dir: ObjectDirective & LegacyDirective,
+  instance: ComponentInternalInstance | null
+): DirectiveHook | DirectiveHook[] | undefined {
+  const mappedName = legacyDirectiveHookMap[name]
+  if (mappedName) {
+    if (isArray(mappedName)) {
+      const hook: DirectiveHook[] = []
+      mappedName.forEach(name => {
+        const mappedHook = dir[name]
+        if (mappedHook) {
+          softAssertCompatEnabled(
+            DeprecationTypes.CUSTOM_DIR,
+            instance,
+            mappedName,
+            name
+          )
+          hook.push(mappedHook)
+        }
+      })
+      return hook.length ? hook : undefined
+    } else {
+      if (dir[mappedName]) {
+        softAssertCompatEnabled(
+          DeprecationTypes.CUSTOM_DIR,
+          instance,
+          mappedName,
+          name
+        )
+      }
+      return dir[mappedName]
+    }
+  }
+}

packages/runtime-core/src/compat/data.ts

@@ -0,0 +1,38 @@
+import { isFunction, isPlainObject } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { ComponentPublicInstance } from '../componentPublicInstance'
+import { DeprecationTypes, warnDeprecation } from './compatConfig'
+
+export function deepMergeData(
+  to: any,
+  from: any,
+  instance: ComponentInternalInstance
+) {
+  for (const key in from) {
+    const toVal = to[key]
+    const fromVal = from[key]
+    if (key in to && isPlainObject(toVal) && isPlainObject(fromVal)) {
+      __DEV__ &&
+        warnDeprecation(DeprecationTypes.OPTIONS_DATA_MERGE, instance, key)
+      deepMergeData(toVal, fromVal, instance)
+    } else {
+      to[key] = fromVal
+    }
+  }
+}
+
+export function mergeDataOption(to: any, from: any) {
+  if (!from) {
+    return to
+  }
+  if (!to) {
+    return from
+  }
+  return function mergedDataFn(this: ComponentPublicInstance) {
+    return deepMergeData(
+      isFunction(to) ? to.call(this, this) : to,
+      isFunction(from) ? from.call(this, this) : from,
+      this.$
+    )
+  }
+}

packages/runtime-core/src/compat/filter.ts

@@ -0,0 +1,18 @@
+import { App, AppContext } from '../apiCreateApp'
+import { warn } from '../warning'
+import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+
+export function installGlobalFilterMethod(app: App, context: AppContext) {
+  context.filters = {}
+  app.filter = (name: string, filter?: Function): any => {
+    assertCompatEnabled(DeprecationTypes.FILTERS, null)
+    if (!filter) {
+      return context.filters![name]
+    }
+    if (__DEV__ && context.filters![name]) {
+      warn(`Filter "${name}" has already been registered.`)
+    }
+    context.filters![name] = filter
+    return app
+  }
+}

packages/runtime-core/src/compat/global.ts

@@ -0,0 +1,529 @@
+import {
+  isReactive,
+  reactive,
+  track,
+  TrackOpTypes,
+  trigger,
+  TriggerOpTypes
+} from '@vue/reactivity'
+import {
+  isFunction,
+  extend,
+  NOOP,
+  EMPTY_OBJ,
+  isArray,
+  isObject,
+  isString
+} from '@vue/shared'
+import { warn } from '../warning'
+import { cloneVNode, createVNode } from '../vnode'
+import { RootRenderFunction } from '../renderer'
+import { RootHydrateFunction } from '../hydration'
+import {
+  App,
+  AppConfig,
+  AppContext,
+  CreateAppFunction,
+  Plugin
+} from '../apiCreateApp'
+import {
+  Component,
+  ComponentOptions,
+  createComponentInstance,
+  finishComponentSetup,
+  isRuntimeOnly,
+  setupComponent
+} from '../component'
+import { RenderFunction, mergeOptions } from '../componentOptions'
+import { ComponentPublicInstance } from '../componentPublicInstance'
+import { devtoolsInitApp } from '../devtools'
+import { Directive } from '../directives'
+import { nextTick } from '../scheduler'
+import { version } from '..'
+import { LegacyConfig, legacyOptionMergeStrats } from './globalConfig'
+import { LegacyDirective } from './customDirective'
+import {
+  warnDeprecation,
+  DeprecationTypes,
+  assertCompatEnabled,
+  configureCompat,
+  isCompatEnabled,
+  softAssertCompatEnabled
+} from './compatConfig'
+import { LegacyPublicInstance } from './instance'
+
+/**
+ * @deprecated the default `Vue` export has been removed in Vue 3. The type for
+ * the default export is provided only for migration purposes. Please use
+ * named imports instead - e.g. `import { createApp } from 'vue'`.
+ */
+export type CompatVue = Pick<App, 'version' | 'component' | 'directive'> & {
+  configureCompat: typeof configureCompat
+
+  // no inference here since these types are not meant for actual use - they
+  // are merely here to provide type checks for internal implementation and
+  // information for migration.
+  new (options?: ComponentOptions): LegacyPublicInstance
+
+  version: string
+  config: AppConfig & LegacyConfig
+
+  extend: (options?: ComponentOptions) => CompatVue
+  nextTick: typeof nextTick
+
+  use(plugin: Plugin, ...options: any[]): CompatVue
+  mixin(mixin: ComponentOptions): CompatVue
+
+  component(name: string): Component | undefined
+  component(name: string, component: Component): CompatVue
+  directive(name: string): Directive | undefined
+  directive(name: string, directive: Directive): CompatVue
+
+  compile(template: string): RenderFunction
+
+  /**
+   * @deprecated Vue 3 no longer needs set() for adding new properties.
+   */
+  set(target: any, key: string | number | symbol, value: any): void
+  /**
+   * @deprecated Vue 3 no longer needs delete() for property deletions.
+   */
+  delete(target: any, key: string | number | symbol): void
+  /**
+   * @deprecated use `reactive` instead.
+   */
+  observable: typeof reactive
+  /**
+   * @deprecated filters have been removed from Vue 3.
+   */
+  filter(name: string, arg: any): null
+  /**
+   * @internal
+   */
+  cid: number
+  /**
+   * @internal
+   */
+  options: ComponentOptions
+  /**
+   * @internal
+   */
+  super: CompatVue
+}
+
+export let isCopyingConfig = false
+
+// Legacy global Vue constructor
+export function createCompatVue(
+  createApp: CreateAppFunction<Element>
+): CompatVue {
+  const Vue: CompatVue = function Vue(options: ComponentOptions = {}) {
+    return createCompatApp(options, Vue)
+  } as any
+
+  const singletonApp = createApp({})
+
+  function createCompatApp(options: ComponentOptions = {}, Ctor: any) {
+    assertCompatEnabled(DeprecationTypes.GLOBAL_MOUNT, null)
+
+    const { data } = options
+    if (
+      data &&
+      !isFunction(data) &&
+      softAssertCompatEnabled(DeprecationTypes.OPTIONS_DATA_FN, null)
+    ) {
+      options.data = () => data
+    }
+
+    const app = createApp(options)
+
+    // copy over asset registries and deopt flag
+    ;['mixins', 'components', 'directives', 'deopt'].forEach(key => {
+      // @ts-ignore
+      app._context[key] = singletonApp._context[key]
+    })
+
+    // copy over global config mutations
+    isCopyingConfig = true
+    for (const key in singletonApp.config) {
+      if (key === 'isNativeTag') continue
+      if (
+        isRuntimeOnly() &&
+        (key === 'isCustomElement' || key === 'compilerOptions')
+      ) {
+        continue
+      }
+      const val = singletonApp.config[key as keyof AppConfig]
+      // @ts-ignore
+      app.config[key] = val
+
+      // compat for runtime ignoredElements -> isCustomElement
+      if (
+        key === 'ignoredElements' &&
+        isCompatEnabled(DeprecationTypes.CONFIG_IGNORED_ELEMENTS, null) &&
+        !isRuntimeOnly() &&
+        isArray(val)
+      ) {
+        app.config.compilerOptions.isCustomElement = tag => {
+          return val.some(v => (isString(v) ? v === tag : v.test(tag)))
+        }
+      }
+    }
+    isCopyingConfig = false
+
+    // copy prototype augmentations as config.globalProperties
+    if (isCompatEnabled(DeprecationTypes.GLOBAL_PROTOTYPE, null)) {
+      app.config.globalProperties = Ctor.prototype
+    }
+    let hasPrototypeAugmentations = false
+    for (const key in Ctor.prototype) {
+      if (key !== 'constructor') {
+        hasPrototypeAugmentations = true
+        break
+      }
+    }
+    if (__DEV__ && hasPrototypeAugmentations) {
+      warnDeprecation(DeprecationTypes.GLOBAL_PROTOTYPE, null)
+    }
+
+    const vm = app._createRoot!(options)
+    if (options.el) {
+      return (vm as any).$mount(options.el)
+    } else {
+      return vm
+    }
+  }
+
+  Vue.version = __VERSION__
+  Vue.config = singletonApp.config
+  Vue.nextTick = nextTick
+  Vue.options = { _base: Vue }
+
+  let cid = 1
+  Vue.cid = cid
+
+  const extendCache = new WeakMap()
+
+  function extendCtor(this: any, extendOptions: ComponentOptions = {}) {
+    assertCompatEnabled(DeprecationTypes.GLOBAL_EXTEND, null)
+    if (isFunction(extendOptions)) {
+      extendOptions = extendOptions.options
+    }
+
+    if (extendCache.has(extendOptions)) {
+      return extendCache.get(extendOptions)
+    }
+
+    const Super = this
+    function SubVue(inlineOptions?: ComponentOptions) {
+      if (!inlineOptions) {
+        return createCompatApp(SubVue.options, SubVue)
+      } else {
+        return createCompatApp(
+          mergeOptions(
+            extend({}, SubVue.options),
+            inlineOptions,
+            null,
+            legacyOptionMergeStrats as any
+          ),
+          SubVue
+        )
+      }
+    }
+    SubVue.super = Super
+    SubVue.prototype = Object.create(Vue.prototype)
+    SubVue.prototype.constructor = SubVue
+
+    // clone non-primitive base option values for edge case of mutating
+    // extended options
+    const mergeBase: any = {}
+    for (const key in Super.options) {
+      const superValue = Super.options[key]
+      mergeBase[key] = isArray(superValue)
+        ? superValue.slice()
+        : isObject(superValue)
+          ? extend(Object.create(null), superValue)
+          : superValue
+    }
+
+    SubVue.options = mergeOptions(
+      mergeBase,
+      extendOptions,
+      null,
+      legacyOptionMergeStrats as any
+    )
+
+    SubVue.options._base = SubVue
+    SubVue.extend = extendCtor.bind(SubVue)
+    SubVue.mixin = Super.mixin
+    SubVue.use = Super.use
+    SubVue.cid = ++cid
+
+    extendCache.set(extendOptions, SubVue)
+    return SubVue
+  }
+
+  Vue.extend = extendCtor.bind(Vue) as any
+
+  Vue.set = (target, key, value) => {
+    assertCompatEnabled(DeprecationTypes.GLOBAL_SET, null)
+    target[key] = value
+  }
+
+  Vue.delete = (target, key) => {
+    assertCompatEnabled(DeprecationTypes.GLOBAL_DELETE, null)
+    delete target[key]
+  }
+
+  Vue.observable = (target: any) => {
+    assertCompatEnabled(DeprecationTypes.GLOBAL_OBSERVABLE, null)
+    return reactive(target)
+  }
+
+  Vue.use = (p, ...options) => {
+    if (p && isFunction(p.install)) {
+      p.install(Vue as any, ...options)
+    } else if (isFunction(p)) {
+      p(Vue as any, ...options)
+    }
+    return Vue
+  }
+
+  Vue.mixin = m => {
+    singletonApp.mixin(m)
+    return Vue
+  }
+
+  Vue.component = ((name: string, comp: Component) => {
+    if (comp) {
+      singletonApp.component(name, comp)
+      return Vue
+    } else {
+      return singletonApp.component(name)
+    }
+  }) as any
+
+  Vue.directive = ((name: string, dir: Directive | LegacyDirective) => {
+    if (dir) {
+      singletonApp.directive(name, dir as Directive)
+      return Vue
+    } else {
+      return singletonApp.directive(name)
+    }
+  }) as any
+
+  Vue.filter = ((name: string, filter: any) => {
+    // TODO deprecation warning
+    // TODO compiler warning for filters (maybe behavior compat?)
+  }) as any
+
+  // internal utils - these are technically internal but some plugins use it.
+  const util = {
+    warn: __DEV__ ? warn : NOOP,
+    extend,
+    mergeOptions: (parent: any, child: any, vm?: ComponentPublicInstance) =>
+      mergeOptions(
+        parent,
+        child,
+        vm && vm.$,
+        vm ? undefined : (legacyOptionMergeStrats as any)
+      ),
+    defineReactive
+  }
+  Object.defineProperty(Vue, 'util', {
+    get() {
+      assertCompatEnabled(DeprecationTypes.GLOBAL_PRIVATE_UTIL, null)
+      return util
+    }
+  })
+
+  Vue.configureCompat = configureCompat
+
+  return Vue
+}
+
+export function installCompatMount(
+  app: App,
+  context: AppContext,
+  render: RootRenderFunction,
+  hydrate?: RootHydrateFunction
+) {
+  let isMounted = false
+
+  /**
+   * Vue 2 supports the behavior of creating a component instance but not
+   * mounting it, which is no longer possible in Vue 3 - this internal
+   * function simulates that behavior.
+   */
+  app._createRoot = options => {
+    const component = app._component
+    const vnode = createVNode(component, options.propsData || null)
+    vnode.appContext = context
+
+    const hasNoRender =
+      !isFunction(component) && !component.render && !component.template
+    const emptyRender = () => {}
+
+    // create root instance
+    const instance = createComponentInstance(vnode, null, null)
+    // suppress "missing render fn" warning since it can't be determined
+    // until $mount is called
+    if (hasNoRender) {
+      instance.render = emptyRender
+    }
+    setupComponent(instance)
+    vnode.component = instance
+
+    // $mount & $destroy
+    // these are defined on ctx and picked up by the $mount/$destroy
+    // public property getters on the instance proxy.
+    // Note: the following assumes DOM environment since the compat build
+    // only targets web. It essentially includes logic for app.mount from
+    // both runtime-core AND runtime-dom.
+    instance.ctx._compat_mount = (selectorOrEl?: string | Element) => {
+      if (isMounted) {
+        __DEV__ && warn(`Root instance is already mounted.`)
+        return
+      }
+
+      let container: Element
+      if (typeof selectorOrEl === 'string') {
+        // eslint-disable-next-line
+        const result = document.querySelector(selectorOrEl)
+        if (!result) {
+          __DEV__ &&
+            warn(
+              `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
+            )
+          return
+        }
+        container = result
+      } else {
+        // eslint-disable-next-line
+        container = selectorOrEl || document.createElement('div')
+      }
+
+      const isSVG = container instanceof SVGElement
+
+      // HMR root reload
+      if (__DEV__) {
+        context.reload = () => {
+          const cloned = cloneVNode(vnode)
+          // compat mode will use instance if not reset to null
+          cloned.component = null
+          render(cloned, container, isSVG)
+        }
+      }
+
+      // resolve in-DOM template if component did not provide render
+      // and no setup/mixin render functions are provided (by checking
+      // that the instance is still using the placeholder render fn)
+      if (hasNoRender && instance.render === emptyRender) {
+        // root directives check
+        if (__DEV__) {
+          for (let i = 0; i < container.attributes.length; i++) {
+            const attr = container.attributes[i]
+            if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
+              warnDeprecation(DeprecationTypes.GLOBAL_MOUNT_CONTAINER, null)
+              break
+            }
+          }
+        }
+        instance.render = null
+        ;(component as ComponentOptions).template = container.innerHTML
+        finishComponentSetup(instance, false, true /* skip options */)
+      }
+
+      // clear content before mounting
+      container.innerHTML = ''
+
+      // TODO hydration
+      render(vnode, container, isSVG)
+
+      if (container instanceof Element) {
+        container.removeAttribute('v-cloak')
+        container.setAttribute('data-v-app', '')
+      }
+
+      isMounted = true
+      app._container = container
+      // for devtools and telemetry
+      ;(container as any).__vue_app__ = app
+      if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+        devtoolsInitApp(app, version)
+      }
+
+      return instance.proxy!
+    }
+
+    instance.ctx._compat_destroy = app.unmount
+
+    return instance.proxy!
+  }
+}
+
+const methodsToPatch = [
+  'push',
+  'pop',
+  'shift',
+  'unshift',
+  'splice',
+  'sort',
+  'reverse'
+]
+
+const patched = new WeakSet<object>()
+
+function defineReactive(obj: any, key: string, val: any) {
+  // it's possible for the orignial object to be mutated after being defined
+  // and expecting reactivity... we are covering it here because this seems to
+  // be a bit more common.
+  if (isObject(val) && !isReactive(val) && !patched.has(val)) {
+    const reactiveVal = reactive(val)
+    if (isArray(val)) {
+      methodsToPatch.forEach(m => {
+        // @ts-ignore
+        val[m] = (...args: any[]) => {
+          // @ts-ignore
+          Array.prototype[m].call(reactiveVal, ...args)
+        }
+      })
+    } else {
+      Object.keys(val).forEach(key => {
+        try {
+          defineReactiveSimple(val, key, val[key])
+        } catch (e) {}
+      })
+    }
+  }
+
+  const i = obj.$
+  if (i && obj === i.proxy) {
+    // Vue instance, add it to data
+    if (i.data === EMPTY_OBJ) {
+      i.data = reactive({})
+    }
+    i.data[key] = val
+    i.accessCache = Object.create(null)
+  } else if (isReactive(obj)) {
+    obj[key] = val
+  } else {
+    defineReactiveSimple(obj, key, val)
+  }
+}
+
+function defineReactiveSimple(obj: any, key: string, val: any) {
+  val = isObject(val) ? reactive(val) : val
+  Object.defineProperty(obj, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
+      track(obj, TrackOpTypes.GET, key)
+      return val
+    },
+    set(newVal) {
+      val = isObject(newVal) ? reactive(newVal) : newVal
+      trigger(obj, TriggerOpTypes.SET, key, newVal)
+    }
+  })
+}

packages/runtime-core/src/compat/globalConfig.ts

@@ -0,0 +1,105 @@
+import { extend, isArray } from '@vue/shared'
+import { AppConfig } from '../apiCreateApp'
+import { mergeDataOption } from './data'
+import { DeprecationTypes, warnDeprecation } from './compatConfig'
+import { isCopyingConfig } from './global'
+
+// legacy config warnings
+export type LegacyConfig = {
+  /**
+   * @deprecated `config.silent` option has been removed
+   */
+  silent?: boolean
+  /**
+   * @deprecated use __VUE_PROD_DEVTOOLS__ compile-time feature flag instead
+   * https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
+   */
+  devtools?: boolean
+  /**
+   * @deprecated use `config.isCustomElement` instead
+   * https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-iscustomelement
+   */
+  ignoredElements?: (string | RegExp)[]
+  /**
+   * @deprecated
+   * https://v3.vuejs.org/guide/migration/keycode-modifiers.html
+   */
+  keyCodes?: Record<string, number | number[]>
+  /**
+   * @deprecated
+   * https://v3.vuejs.org/guide/migration/global-api.html#config-productiontip-removed
+   */
+  productionTip?: boolean
+}
+
+// dev only
+export function installLegacyConfigProperties(config: AppConfig) {
+  const legacyConfigOptions: Record<string, DeprecationTypes> = {
+    silent: DeprecationTypes.CONFIG_SILENT,
+    devtools: DeprecationTypes.CONFIG_DEVTOOLS,
+    ignoredElements: DeprecationTypes.CONFIG_IGNORED_ELEMENTS,
+    keyCodes: DeprecationTypes.CONFIG_KEY_CODES,
+    productionTip: DeprecationTypes.CONFIG_PRODUCTION_TIP
+  }
+
+  Object.keys(legacyConfigOptions).forEach(key => {
+    let val = (config as any)[key]
+    Object.defineProperty(config, key, {
+      enumerable: true,
+      get() {
+        return val
+      },
+      set(newVal) {
+        if (!isCopyingConfig) {
+          warnDeprecation(legacyConfigOptions[key], null)
+        }
+        val = newVal
+      }
+    })
+  })
+
+  // Internal merge strats which are no longer needed in v3, but we need to
+  // expose them because some v2 plugins will reuse these internal strats to
+  // merge their custom options.
+  extend(config.optionMergeStrategies, legacyOptionMergeStrats)
+}
+
+export const legacyOptionMergeStrats = {
+  data: mergeDataOption,
+  beforeCreate: mergeHook,
+  created: mergeHook,
+  beforeMount: mergeHook,
+  mounted: mergeHook,
+  beforeUpdate: mergeHook,
+  updated: mergeHook,
+  beforeDestroy: mergeHook,
+  destroyed: mergeHook,
+  activated: mergeHook,
+  deactivated: mergeHook,
+  errorCaptured: mergeHook,
+  serverPrefetch: mergeHook,
+  // assets
+  components: mergeObjectOptions,
+  directives: mergeObjectOptions,
+  filters: mergeObjectOptions,
+  // objects
+  props: mergeObjectOptions,
+  methods: mergeObjectOptions,
+  inject: mergeObjectOptions,
+  computed: mergeObjectOptions,
+  // watch has special merge behavior in v2, but isn't actually needed in v3.
+  // since we are only exposing these for compat and nobody should be relying
+  // on the watch-specific behavior, just expose the object merge strat.
+  watch: mergeObjectOptions
+}
+
+function mergeHook(
+  to: Function[] | Function | undefined,
+  from: Function | Function[]
+) {
+  return Array.from(new Set([...(isArray(to) ? to : to ? [to] : []), from]))
+}
+
+function mergeObjectOptions(to: Object | undefined, from: Object | undefined) {
+  return to ? extend(extend(Object.create(null), to), from) : from
+}

packages/runtime-core/src/compat/instance.ts

@@ -0,0 +1,154 @@
+import {
+  extend,
+  looseEqual,
+  looseIndexOf,
+  NOOP,
+  toDisplayString,
+  toNumber
+} from '@vue/shared'
+import {
+  ComponentPublicInstance,
+  PublicPropertiesMap
+} from '../componentPublicInstance'
+import { getCompatChildren } from './instanceChildren'
+import {
+  DeprecationTypes,
+  assertCompatEnabled,
+  isCompatEnabled
+} from './compatConfig'
+import { off, on, once } from './instanceEventEmitter'
+import { getCompatListeners } from './instanceListeners'
+import { shallowReadonly } from '@vue/reactivity'
+import { legacySlotProxyHandlers } from './component'
+import { compatH } from './renderFn'
+import { createCommentVNode, createTextVNode } from '../vnode'
+import { renderList } from '../helpers/renderList'
+import {
+  legacyBindDynamicKeys,
+  legacyBindObjectListeners,
+  legacyBindObjectProps,
+  legacyCheckKeyCodes,
+  legacyMarkOnce,
+  legacyPrependModifier,
+  legacyRenderSlot,
+  legacyRenderStatic,
+  legacyresolveScopedSlots
+} from './renderHelpers'
+import { resolveFilter } from '../helpers/resolveAssets'
+import { resolveMergedOptions } from '../componentOptions'
+import { Slots } from '../componentSlots'
+
+export type LegacyPublicInstance = ComponentPublicInstance &
+  LegacyPublicProperties
+
+export interface LegacyPublicProperties {
+  $set(target: object, key: string, value: any): void
+  $delete(target: object, key: string): void
+  $mount(el?: string | Element): this
+  $destroy(): void
+  $scopedSlots: Slots
+  $on(event: string | string[], fn: Function): this
+  $once(event: string, fn: Function): this
+  $off(event?: string, fn?: Function): this
+  $children: LegacyPublicProperties[]
+  $listeners: Record<string, Function | Function[]>
+}
+
+export function installCompatInstanceProperties(map: PublicPropertiesMap) {
+  const set = (target: any, key: any, val: any) => {
+    target[key] = val
+  }
+
+  const del = (target: any, key: any) => {
+    delete target[key]
+  }
+
+  extend(map, {
+    $set: i => {
+      assertCompatEnabled(DeprecationTypes.INSTANCE_SET, i)
+      return set
+    },
+
+    $delete: i => {
+      assertCompatEnabled(DeprecationTypes.INSTANCE_DELETE, i)
+      return del
+    },
+
+    $mount: i => {
+      assertCompatEnabled(
+        DeprecationTypes.GLOBAL_MOUNT,
+        null /* this warning is global */
+      )
+      // root mount override from ./global.ts in installCompatMount
+      return i.ctx._compat_mount || NOOP
+    },
+
+    $destroy: i => {
+      assertCompatEnabled(DeprecationTypes.INSTANCE_DESTROY, i)
+      // root destroy override from ./global.ts in installCompatMount
+      return i.ctx._compat_destroy || NOOP
+    },
+
+    // overrides existing accessor
+    $slots: i => {
+      if (
+        isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, i) &&
+        i.render &&
+        i.render._compatWrapped
+      ) {
+        return new Proxy(i.slots, legacySlotProxyHandlers)
+      }
+      return __DEV__ ? shallowReadonly(i.slots) : i.slots
+    },
+
+    $scopedSlots: i => {
+      assertCompatEnabled(DeprecationTypes.INSTANCE_SCOPED_SLOTS, i)
+      return __DEV__ ? shallowReadonly(i.slots) : i.slots
+    },
+
+    $on: i => on.bind(null, i),
+    $once: i => once.bind(null, i),
+    $off: i => off.bind(null, i),
+
+    $children: getCompatChildren,
+    $listeners: getCompatListeners
+  } as PublicPropertiesMap)
+
+  if (isCompatEnabled(DeprecationTypes.PRIVATE_APIS, null)) {
+    extend(map, {
+      $vnode: i => i.vnode,
+
+      // inject addtional properties into $options for compat
+      $options: i => {
+        let res = resolveMergedOptions(i)
+        if (res === i.type) res = i.type.__merged = extend({}, res)
+        res.parent = i.proxy!.$parent
+        res.propsData = i.vnode.props
+        return res
+      },
+
+      // v2 render helpers
+      $createElement: () => compatH,
+      _self: i => i.proxy,
+      _uid: i => i.uid,
+      _c: () => compatH,
+      _o: () => legacyMarkOnce,
+      _n: () => toNumber,
+      _s: () => toDisplayString,
+      _l: () => renderList,
+      _t: i => legacyRenderSlot.bind(null, i),
+      _q: () => looseEqual,
+      _i: () => looseIndexOf,
+      _m: i => legacyRenderStatic.bind(null, i),
+      _f: () => resolveFilter,
+      _k: i => legacyCheckKeyCodes.bind(null, i),
+      _b: () => legacyBindObjectProps,
+      _v: () => createTextVNode,
+      _e: () => createCommentVNode,
+      _u: () => legacyresolveScopedSlots,
+      _g: () => legacyBindObjectListeners,
+      _d: () => legacyBindDynamicKeys,
+      _p: () => legacyPrependModifier
+    } as PublicPropertiesMap)
+  }
+}

packages/runtime-core/src/compat/instanceChildren.ts

@@ -0,0 +1,28 @@
+import { ShapeFlags } from '@vue/shared/src'
+import { ComponentInternalInstance } from '../component'
+import { ComponentPublicInstance } from '../componentPublicInstance'
+import { VNode } from '../vnode'
+import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+
+export function getCompatChildren(
+  instance: ComponentInternalInstance
+): ComponentPublicInstance[] {
+  assertCompatEnabled(DeprecationTypes.INSTANCE_CHILDREN, instance)
+  const root = instance.subTree
+  const children: ComponentPublicInstance[] = []
+  if (root) {
+    walk(root, children)
+  }
+  return children
+}
+
+function walk(vnode: VNode, children: ComponentPublicInstance[]) {
+  if (vnode.component) {
+    children.push(vnode.component.proxy!)
+  } else if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+    const vnodes = vnode.children as VNode[]
+    for (let i = 0; i < vnodes.length; i++) {
+      walk(vnodes[i], children)
+    }
+  }
+}

packages/runtime-core/src/compat/instanceEventEmitter.ts

@@ -0,0 +1,108 @@
+import { isArray } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
+import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+
+interface EventRegistry {
+  [event: string]: Function[] | undefined
+}
+
+const eventRegistryMap = /*#__PURE__*/ new WeakMap<
+  ComponentInternalInstance,
+  EventRegistry
+>()
+
+export function getRegistry(
+  instance: ComponentInternalInstance
+): EventRegistry {
+  let events = eventRegistryMap.get(instance)
+  if (!events) {
+    eventRegistryMap.set(instance, (events = Object.create(null)))
+  }
+  return events!
+}
+
+export function on(
+  instance: ComponentInternalInstance,
+  event: string | string[],
+  fn: Function
+) {
+  if (isArray(event)) {
+    event.forEach(e => on(instance, e, fn))
+  } else {
+    if (event.startsWith('hook:')) {
+      assertCompatEnabled(
+        DeprecationTypes.INSTANCE_EVENT_HOOKS,
+        instance,
+        event
+      )
+    } else {
+      assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
+    }
+    const events = getRegistry(instance)
+    ;(events[event] || (events[event] = [])).push(fn)
+  }
+  return instance.proxy
+}
+
+export function once(
+  instance: ComponentInternalInstance,
+  event: string,
+  fn: Function
+) {
+  const wrapped = (...args: any[]) => {
+    off(instance, event, wrapped)
+    fn.call(instance.proxy, ...args)
+  }
+  wrapped.fn = fn
+  on(instance, event, wrapped)
+  return instance.proxy
+}
+
+export function off(
+  instance: ComponentInternalInstance,
+  event?: string,
+  fn?: Function
+) {
+  assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
+  const vm = instance.proxy
+  // all
+  if (!arguments.length) {
+    eventRegistryMap.set(instance, Object.create(null))
+    return vm
+  }
+  // array of events
+  if (isArray(event)) {
+    event.forEach(e => off(instance, e, fn))
+    return vm
+  }
+  // specific event
+  const events = getRegistry(instance)
+  const cbs = events[event!]
+  if (!cbs) {
+    return vm
+  }
+  if (!fn) {
+    events[event!] = undefined
+    return vm
+  }
+  events[event!] = cbs.filter(cb => !(cb === fn || (cb as any).fn === fn))
+  return vm
+}
+
+export function emit(
+  instance: ComponentInternalInstance,
+  event: string,
+  ...args: any[]
+) {
+  const cbs = getRegistry(instance)[event]
+  if (cbs) {
+    callWithAsyncErrorHandling(
+      cbs,
+      instance,
+      ErrorCodes.COMPONENT_EVENT_HANDLER,
+      args
+    )
+  }
+  return instance.proxy
+}

packages/runtime-core/src/compat/instanceListeners.ts

@@ -0,0 +1,19 @@
+import { isOn } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+
+export function getCompatListeners(instance: ComponentInternalInstance) {
+  assertCompatEnabled(DeprecationTypes.INSTANCE_LISTENERS, instance)
+
+  const listeners: Record<string, Function | Function[]> = {}
+  const rawProps = instance.vnode.props
+  if (!rawProps) {
+    return listeners
+  }
+  for (const key in rawProps) {
+    if (isOn(key)) {
+      listeners[key[2].toLowerCase() + key.slice(3)] = rawProps[key]
+    }
+  }
+  return listeners
+}

packages/runtime-core/src/compat/props.ts

@@ -0,0 +1,40 @@
+import { isArray } from '@vue/shared'
+import { inject } from '../apiInject'
+import { ComponentInternalInstance, Data } from '../component'
+import { ComponentOptions, resolveMergedOptions } from '../componentOptions'
+import { DeprecationTypes, warnDeprecation } from './compatConfig'
+
+export function createPropsDefaultThis(
+  instance: ComponentInternalInstance,
+  rawProps: Data,
+  propKey: string
+) {
+  return new Proxy(
+    {},
+    {
+      get(_, key: string) {
+        __DEV__ &&
+          warnDeprecation(DeprecationTypes.PROPS_DEFAULT_THIS, null, propKey)
+        // $options
+        if (key === '$options') {
+          return resolveMergedOptions(instance)
+        }
+        // props
+        if (key in rawProps) {
+          return rawProps[key]
+        }
+        // injections
+        const injections = (instance.type as ComponentOptions).inject
+        if (injections) {
+          if (isArray(injections)) {
+            if (injections.includes(key)) {
+              return inject(key)
+            }
+          } else if (key in injections) {
+            return inject(key)
+          }
+        }
+      }
+    }
+  )
+}

packages/runtime-core/src/compat/ref.ts

@@ -0,0 +1,45 @@
+import { isArray, remove } from '@vue/shared'
+import { ComponentInternalInstance, Data } from '../component'
+import { VNode } from '../vnode'
+import { DeprecationTypes, warnDeprecation } from './compatConfig'
+
+export function convertLegacyRefInFor(vnode: VNode) {
+  // refInFor
+  if (vnode.props && vnode.props.refInFor) {
+    delete vnode.props.refInFor
+    if (vnode.ref) {
+      if (isArray(vnode.ref)) {
+        vnode.ref.forEach(r => (r.f = true))
+      } else {
+        vnode.ref.f = true
+      }
+    }
+  }
+}
+
+export function registerLegacyRef(
+  refs: Data,
+  key: string,
+  value: any,
+  owner: ComponentInternalInstance,
+  isInFor: boolean | undefined,
+  isUnmount: boolean
+) {
+  const existing = refs[key]
+  if (isUnmount) {
+    if (isArray(existing)) {
+      remove(existing, value)
+    } else {
+      refs[key] = null
+    }
+  } else if (isInFor) {
+    __DEV__ && warnDeprecation(DeprecationTypes.V_FOR_REF, owner)
+    if (!isArray(existing)) {
+      refs[key] = [value]
+    } else if (!existing.includes(value)) {
+      existing.push(value)
+    }
+  } else {
+    refs[key] = value
+  }
+}

packages/runtime-core/src/compat/renderFn.ts

@@ -0,0 +1,344 @@
+import {
+  extend,
+  hyphenate,
+  isArray,
+  isObject,
+  isString,
+  makeMap,
+  normalizeClass,
+  normalizeStyle,
+  ShapeFlags,
+  toHandlerKey
+} from '@vue/shared'
+import {
+  Component,
+  ComponentInternalInstance,
+  ComponentOptions,
+  Data,
+  InternalRenderFunction
+} from '../component'
+import { currentRenderingInstance } from '../componentRenderContext'
+import { DirectiveArguments, withDirectives } from '../directives'
+import {
+  resolveDirective,
+  resolveDynamicComponent
+} from '../helpers/resolveAssets'
+import {
+  Comment,
+  createVNode,
+  isVNode,
+  normalizeChildren,
+  VNode,
+  VNodeArrayChildren,
+  VNodeProps
+} from '../vnode'
+import {
+  checkCompatEnabled,
+  DeprecationTypes,
+  isCompatEnabled
+} from './compatConfig'
+import { compatModelEventPrefix } from './vModel'
+
+const v3CompiledRenderFnRE = /^(?:function \w+)?\(_ctx, _cache/
+
+export function convertLegacyRenderFn(instance: ComponentInternalInstance) {
+  const Component = instance.type as ComponentOptions
+  const render = Component.render as InternalRenderFunction | undefined
+
+  // v3 runtime compiled, or already checked / wrapped
+  if (!render || render._rc || render._compatChecked || render._compatWrapped) {
+    return
+  }
+
+  if (v3CompiledRenderFnRE.test(render.toString())) {
+    // v3 pre-compiled function
+    render._compatChecked = true
+    return
+  }
+
+  // v2 render function, try to provide compat
+  if (checkCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance)) {
+    const wrapped = (Component.render = function compatRender() {
+      // @ts-ignore
+      return render.call(this, compatH)
+    })
+    // @ts-ignore
+    wrapped._compatWrapped = true
+  }
+}
+
+interface LegacyVNodeProps {
+  key?: string | number
+  ref?: string
+  refInFor?: boolean
+
+  staticClass?: string
+  class?: unknown
+  staticStyle?: Record<string, unknown>
+  style?: Record<string, unknown>
+  attrs?: Record<string, unknown>
+  domProps?: Record<string, unknown>
+  on?: Record<string, Function | Function[]>
+  nativeOn?: Record<string, Function | Function[]>
+  directives?: LegacyVNodeDirective[]
+
+  // component only
+  props?: Record<string, unknown>
+  slot?: string
+  scopedSlots?: Record<string, Function>
+  model?: {
+    value: any
+    callback: (v: any) => void
+    expression: string
+  }
+}
+
+interface LegacyVNodeDirective {
+  name: string
+  value: unknown
+  arg?: string
+  modifiers?: Record<string, boolean>
+}
+
+type LegacyVNodeChildren =
+  | string
+  | number
+  | boolean
+  | VNode
+  | VNodeArrayChildren
+
+export function compatH(
+  type: string | Component,
+  children?: LegacyVNodeChildren
+): VNode
+export function compatH(
+  type: string | Component,
+  props?: LegacyVNodeProps,
+  children?: LegacyVNodeChildren
+): VNode
+
+export function compatH(
+  type: any,
+  propsOrChildren?: any,
+  children?: any
+): VNode {
+  if (!type) {
+    type = Comment
+  }
+
+  // to support v2 string component name look!up
+  if (typeof type === 'string') {
+    const t = hyphenate(type)
+    if (t === 'transition' || t === 'transition-group' || t === 'keep-alive') {
+      // since transition and transition-group are runtime-dom-specific,
+      // we cannot import them directly here. Instead they are registered using
+      // special keys in @vue/compat entry.
+      type = `__compat__${t}`
+    }
+    type = resolveDynamicComponent(type)
+  }
+
+  const l = arguments.length
+  const is2ndArgArrayChildren = isArray(propsOrChildren)
+  if (l === 2 || is2ndArgArrayChildren) {
+    if (isObject(propsOrChildren) && !is2ndArgArrayChildren) {
+      // single vnode without props
+      if (isVNode(propsOrChildren)) {
+        return convertLegacySlots(createVNode(type, null, [propsOrChildren]))
+      }
+      // props without children
+      return convertLegacySlots(
+        convertLegacyDirectives(
+          createVNode(type, convertLegacyProps(propsOrChildren, type)),
+          propsOrChildren
+        )
+      )
+    } else {
+      // omit props
+      return convertLegacySlots(createVNode(type, null, propsOrChildren))
+    }
+  } else {
+    if (isVNode(children)) {
+      children = [children]
+    }
+    return convertLegacySlots(
+      convertLegacyDirectives(
+        createVNode(type, convertLegacyProps(propsOrChildren, type), children),
+        propsOrChildren
+      )
+    )
+  }
+}
+
+const skipLegacyRootLevelProps = /*#__PURE__*/ makeMap(
+  'staticStyle,staticClass,directives,model,hook'
+)
+
+function convertLegacyProps(
+  legacyProps: LegacyVNodeProps | undefined,
+  type: any
+): Data & VNodeProps | null {
+  if (!legacyProps) {
+    return null
+  }
+
+  const converted: Data & VNodeProps = {}
+
+  for (const key in legacyProps) {
+    if (key === 'attrs' || key === 'domProps' || key === 'props') {
+      extend(converted, legacyProps[key])
+    } else if (key === 'on' || key === 'nativeOn') {
+      const listeners = legacyProps[key]
+      for (const event in listeners) {
+        const handlerKey = convertLegacyEventKey(event)
+        const existing = converted[handlerKey]
+        const incoming = listeners[event]
+        if (existing !== incoming) {
+          if (existing) {
+            // for the rare case where the same handler is attached
+            // twice with/without .native modifier...
+            if (key === 'nativeOn' && String(existing) === String(incoming)) {
+              continue
+            }
+            converted[handlerKey] = [].concat(existing as any, incoming as any)
+          } else {
+            converted[handlerKey] = incoming
+          }
+        }
+      }
+    } else if (!skipLegacyRootLevelProps(key)) {
+      converted[key] = legacyProps[key as keyof LegacyVNodeProps]
+    }
+  }
+
+  if (legacyProps.staticClass) {
+    converted.class = normalizeClass([legacyProps.staticClass, converted.class])
+  }
+  if (legacyProps.staticStyle) {
+    converted.style = normalizeStyle([legacyProps.staticStyle, converted.style])
+  }
+
+  if (legacyProps.model && isObject(type)) {
+    // v2 compiled component v-model
+    const { prop = 'value', event = 'input' } = (type as any).model || {}
+    converted[prop] = legacyProps.model.value
+    converted[compatModelEventPrefix + event] = legacyProps.model.callback
+  }
+
+  return converted
+}
+
+function convertLegacyEventKey(event: string): string {
+  // normalize v2 event prefixes
+  if (event[0] === '&') {
+    event = event.slice(1) + 'Passive'
+  }
+  if (event[0] === '~') {
+    event = event.slice(1) + 'Once'
+  }
+  if (event[0] === '!') {
+    event = event.slice(1) + 'Capture'
+  }
+  return toHandlerKey(event)
+}
+
+function convertLegacyDirectives(
+  vnode: VNode,
+  props?: LegacyVNodeProps
+): VNode {
+  if (props && props.directives) {
+    return withDirectives(
+      vnode,
+      props.directives.map(({ name, value, arg, modifiers }) => {
+        return [
+          resolveDirective(name)!,
+          value,
+          arg,
+          modifiers
+        ] as DirectiveArguments[number]
+      })
+    )
+  }
+  return vnode
+}
+
+function convertLegacySlots(vnode: VNode): VNode {
+  const { props, children } = vnode
+
+  let slots: Record<string, any> | undefined
+
+  if (vnode.shapeFlag & ShapeFlags.COMPONENT && isArray(children)) {
+    slots = {}
+    // check "slot" property on vnodes and turn them into v3 function slots
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i]
+      const slotName =
+        (isVNode(child) && child.props && child.props.slot) || 'default'
+      const slot = slots[slotName] || (slots[slotName] = [] as any[])
+      if (isVNode(child) && child.type === 'template') {
+        slot.push(child.children)
+      } else {
+        slot.push(child)
+      }
+    }
+    if (slots) {
+      for (const key in slots) {
+        const slotChildren = slots[key]
+        slots[key] = () => slotChildren
+      }
+    }
+  }
+
+  const scopedSlots = props && props.scopedSlots
+  if (scopedSlots) {
+    delete props!.scopedSlots
+    if (slots) {
+      extend(slots, scopedSlots)
+    } else {
+      slots = scopedSlots
+    }
+  }
+
+  if (slots) {
+    normalizeChildren(vnode, slots)
+  }
+
+  return vnode
+}
+
+export function defineLegacyVNodeProperties(vnode: VNode) {
+  if (
+    isCompatEnabled(
+      DeprecationTypes.RENDER_FUNCTION,
+      currentRenderingInstance
+    ) &&
+    isCompatEnabled(DeprecationTypes.PRIVATE_APIS, currentRenderingInstance)
+  ) {
+    const context = currentRenderingInstance
+    const getInstance = () => vnode.component && vnode.component.proxy
+    let componentOptions: any
+    Object.defineProperties(vnode, {
+      tag: { get: () => vnode.type },
+      data: { get: () => vnode.props, set: p => (vnode.props = p) },
+      elm: { get: () => vnode.el },
+      componentInstance: { get: getInstance },
+      child: { get: getInstance },
+      text: { get: () => (isString(vnode.children) ? vnode.children : null) },
+      context: { get: () => context && context.proxy },
+      componentOptions: {
+        get: () => {
+          if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+            if (componentOptions) {
+              return componentOptions
+            }
+            return (componentOptions = {
+              Ctor: vnode.type,
+              propsData: vnode.props,
+              children: vnode.children
+            })
+          }
+        }
+      }
+    })
+  }
+}

packages/runtime-core/src/compat/renderHelpers.ts

@@ -0,0 +1,182 @@
+import {
+  camelize,
+  extend,
+  hyphenate,
+  isArray,
+  isObject,
+  isReservedProp,
+  normalizeClass
+} from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { Slot } from '../componentSlots'
+import { createSlots } from '../helpers/createSlots'
+import { renderSlot } from '../helpers/renderSlot'
+import { toHandlers } from '../helpers/toHandlers'
+import { mergeProps, VNode } from '../vnode'
+
+function toObject(arr: Array<any>): Object {
+  const res = {}
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      extend(res, arr[i])
+    }
+  }
+  return res
+}
+
+export function legacyBindObjectProps(
+  data: any,
+  _tag: string,
+  value: any,
+  _asProp: boolean,
+  isSync?: boolean
+) {
+  if (value && isObject(value)) {
+    if (isArray(value)) {
+      value = toObject(value)
+    }
+    for (const key in value) {
+      if (isReservedProp(key)) {
+        data[key] = value[key]
+      } else if (key === 'class') {
+        data.class = normalizeClass([data.class, value.class])
+      } else if (key === 'style') {
+        data.style = normalizeClass([data.style, value.style])
+      } else {
+        const attrs = data.attrs || (data.attrs = {})
+        const camelizedKey = camelize(key)
+        const hyphenatedKey = hyphenate(key)
+        if (!(camelizedKey in attrs) && !(hyphenatedKey in attrs)) {
+          attrs[key] = value[key]
+
+          if (isSync) {
+            const on = data.on || (data.on = {})
+            on[`update:${key}`] = function($event: any) {
+              value[key] = $event
+            }
+          }
+        }
+      }
+    }
+  }
+  return data
+}
+
+export function legacyBindObjectListeners(props: any, listeners: any) {
+  return mergeProps(props, toHandlers(listeners))
+}
+
+export function legacyRenderSlot(
+  instance: ComponentInternalInstance,
+  name: string,
+  fallback?: VNode[],
+  props?: any,
+  bindObject?: any
+) {
+  if (bindObject) {
+    props = mergeProps(props, bindObject)
+  }
+  return renderSlot(instance.slots, name, props, fallback && (() => fallback))
+}
+
+type LegacyScopedSlotsData = Array<
+  | {
+      key: string
+      fn: Function
+    }
+  | LegacyScopedSlotsData
+>
+
+export function legacyresolveScopedSlots(
+  fns: LegacyScopedSlotsData,
+  raw?: Record<string, Slot>,
+  // the following are added in 2.6
+  hasDynamicKeys?: boolean
+) {
+  // v2 default slot doesn't have name
+  return createSlots(
+    raw || ({ $stable: !hasDynamicKeys } as any),
+    mapKeyToName(fns)
+  )
+}
+
+function mapKeyToName(slots: LegacyScopedSlotsData) {
+  for (let i = 0; i < slots.length; i++) {
+    const fn = slots[i]
+    if (fn) {
+      if (isArray(fn)) {
+        mapKeyToName(fn)
+      } else {
+        ;(fn as any).name = fn.key || 'default'
+      }
+    }
+  }
+  return slots as any
+}
+
+const staticCacheMap = /*#__PURE__*/ new WeakMap<
+  ComponentInternalInstance,
+  any[]
+>()
+
+export function legacyRenderStatic(
+  instance: ComponentInternalInstance,
+  index: number
+) {
+  let cache = staticCacheMap.get(instance)
+  if (!cache) {
+    staticCacheMap.set(instance, (cache = []))
+  }
+  if (cache[index]) {
+    return cache[index]
+  }
+  const fn = (instance.type as any).staticRenderFns[index]
+  const ctx = instance.proxy
+  return (cache[index] = fn.call(ctx, null, ctx))
+}
+
+export function legacyCheckKeyCodes(
+  instance: ComponentInternalInstance,
+  eventKeyCode: number,
+  key: string,
+  builtInKeyCode?: number | number[],
+  eventKeyName?: string,
+  builtInKeyName?: string | string[]
+) {
+  const config = instance.appContext.config as any
+  const configKeyCodes = config.keyCodes || {}
+  const mappedKeyCode = configKeyCodes[key] || builtInKeyCode
+  if (builtInKeyName && eventKeyName && !configKeyCodes[key]) {
+    return isKeyNotMatch(builtInKeyName, eventKeyName)
+  } else if (mappedKeyCode) {
+    return isKeyNotMatch(mappedKeyCode, eventKeyCode)
+  } else if (eventKeyName) {
+    return hyphenate(eventKeyName) !== key
+  }
+}
+
+function isKeyNotMatch<T>(expect: T | T[], actual: T): boolean {
+  if (isArray(expect)) {
+    return expect.indexOf(actual) === -1
+  } else {
+    return expect !== actual
+  }
+}
+
+export function legacyMarkOnce(tree: VNode) {
+  return tree
+}
+
+export function legacyBindDynamicKeys(props: any, values: any[]) {
+  for (let i = 0; i < values.length; i += 2) {
+    const key = values[i]
+    if (typeof key === 'string' && key) {
+      props[values[i]] = values[i + 1]
+    }
+  }
+  return props
+}
+
+export function legacyPrependModifier(value: any, symbol: string) {
+  return typeof value === 'string' ? symbol + value : value
+}

packages/runtime-core/src/compat/vModel.ts

@@ -0,0 +1,71 @@
+import { ShapeFlags } from '@vue/shared'
+import { ComponentInternalInstance, ComponentOptions } from '../component'
+import { callWithErrorHandling, ErrorCodes } from '../errorHandling'
+import { VNode } from '../vnode'
+import { popWarningContext, pushWarningContext } from '../warning'
+import {
+  DeprecationTypes,
+  warnDeprecation,
+  isCompatEnabled
+} from './compatConfig'
+
+export const compatModelEventPrefix = `onModelCompat:`
+
+const warnedTypes = new WeakSet()
+
+export function convertLegacyVModelProps(vnode: VNode) {
+  const { type, shapeFlag, props, dynamicProps } = vnode
+  if (shapeFlag & ShapeFlags.COMPONENT && props && 'modelValue' in props) {
+    if (
+      !isCompatEnabled(
+        DeprecationTypes.COMPONENT_V_MODEL,
+        // this is a special case where we want to use the vnode component's
+        // compat config instead of the current rendering instance (which is the
+        // parent of the component that exposes v-model)
+        { type } as any
+      )
+    ) {
+      return
+    }
+
+    if (__DEV__ && !warnedTypes.has(type as ComponentOptions)) {
+      pushWarningContext(vnode)
+      warnDeprecation(DeprecationTypes.COMPONENT_V_MODEL, { type } as any, type)
+      popWarningContext()
+      warnedTypes.add(type as ComponentOptions)
+    }
+
+    // v3 compiled model code -> v2 compat props
+    // modelValue -> value
+    // onUpdate:modelValue -> onModelCompat:input
+    const { prop = 'value', event = 'input' } = (type as any).model || {}
+    props[prop] = props.modelValue
+    delete props.modelValue
+    // important: update dynamic props
+    if (dynamicProps) {
+      dynamicProps[dynamicProps.indexOf('modelValue')] = prop
+    }
+    props[compatModelEventPrefix + event] = props['onUpdate:modelValue']
+    delete props['onUpdate:modelValue']
+  }
+}
+
+export function compatModelEmit(
+  instance: ComponentInternalInstance,
+  event: string,
+  args: any[]
+) {
+  if (!isCompatEnabled(DeprecationTypes.COMPONENT_V_MODEL, instance)) {
+    return
+  }
+  const props = instance.vnode.props
+  const modelHandler = props && props[compatModelEventPrefix + event]
+  if (modelHandler) {
+    callWithErrorHandling(
+      modelHandler,
+      instance,
+      ErrorCodes.COMPONENT_EVENT_HANDLER,
+      args
+    )
+  }
+}

packages/runtime-core/src/component.ts

@@ -47,13 +47,16 @@ import {
   NO,
   makeMap,
   isPromise,
-  ShapeFlags
+  ShapeFlags,
+  extend
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerOptions } from '@vue/compiler-core'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { startMeasure, endMeasure } from './profiling'
+import { convertLegacyRenderFn } from './compat/renderFn'
+import { globalCompatConfig, validateCompatConfig } from './compat/compatConfig'
 
 export type Data = Record<string, unknown>
 
@@ -93,6 +96,10 @@ export interface ComponentInternalOptions {
    * @internal
    */
   __hmrId?: string
+  /**
+   * Compat build only, for bailing out of certain compatibility behavior
+   */
+  __isBuiltIn?: boolean
   /**
    * This one should be exposed so that devtools can make use of it
    */
@@ -185,6 +192,10 @@ export type InternalRenderFunction = {
     $options: ComponentInternalInstance['ctx']
   ): VNodeChild
   _rc?: boolean // isRuntimeCompiled
+
+  // __COMPAT__ only
+  _compatChecked?: boolean // v3 and already checked for v2 compat
+  _compatWrapped?: boolean // is wrapped for v2 compat
 }
 
 /**
@@ -257,6 +268,11 @@ export interface ComponentInternalInstance {
    * @internal
    */
   directives: Record<string, Directive> | null
+  /**
+   * Resolved filters registry, v2 compat only
+   * @internal
+   */
+  filters?: Record<string, Function>
   /**
    * resolved props options
    * @internal
@@ -562,6 +578,13 @@ function setupStatefulComponent(
         validateDirectiveName(names[i])
       }
     }
+    if (Component.compilerOptions && isRuntimeOnly()) {
+      warn(
+        `"compilerOptions" is only supported when using a build of Vue that ` +
+          `includes the runtime compiler. Since you are using a runtime-only ` +
+          `build, the options should be passed via your build tool config instead.`
+      )
+    }
   }
   // 0. create render proxy property access cache
   instance.accessCache = Object.create(null)
@@ -674,12 +697,21 @@ export function registerRuntimeCompiler(_compile: any) {
   compile = _compile
 }
 
-function finishComponentSetup(
+export function finishComponentSetup(
   instance: ComponentInternalInstance,
-  isSSR: boolean
+  isSSR: boolean,
+  skipOptions?: boolean
 ) {
   const Component = instance.type as ComponentOptions
 
+  if (__COMPAT__) {
+    convertLegacyRenderFn(instance)
+
+    if (__DEV__ && Component.compatConfig) {
+      validateCompatConfig(Component.compatConfig)
+    }
+  }
+
   // template / render function normalization
   if (__NODE_JS__ && isSSR) {
     // 1. the render function may already exist, returned by `setup`
@@ -692,16 +724,42 @@ function finishComponentSetup(
       NOOP) as InternalRenderFunction
   } else if (!instance.render) {
     // could be set from setup()
-    if (compile && Component.template && !Component.render) {
-      if (__DEV__) {
-        startMeasure(instance, `compile`)
-      }
-      Component.render = compile(Component.template, {
-        isCustomElement: instance.appContext.config.isCustomElement,
-        delimiters: Component.delimiters
-      })
-      if (__DEV__) {
-        endMeasure(instance, `compile`)
+    if (compile && !Component.render) {
+      const template =
+        (__COMPAT__ &&
+          instance.vnode.props &&
+          instance.vnode.props['inline-template']) ||
+        Component.template
+      if (template) {
+        if (__DEV__) {
+          startMeasure(instance, `compile`)
+        }
+        const { isCustomElement, compilerOptions } = instance.appContext.config
+        const {
+          delimiters,
+          compilerOptions: componentCompilerOptions
+        } = Component
+        const finalCompilerOptions: CompilerOptions = extend(
+          extend(
+            {
+              isCustomElement,
+              delimiters
+            },
+            compilerOptions
+          ),
+          componentCompilerOptions
+        )
+        if (__COMPAT__) {
+          // pass runtime compat config into the compiler
+          finalCompilerOptions.compatConfig = Object.create(globalCompatConfig)
+          if (Component.compatConfig) {
+            extend(finalCompilerOptions.compatConfig, Component.compatConfig)
+          }
+        }
+        Component.render = compile(template, finalCompilerOptions)
+        if (__DEV__) {
+          endMeasure(instance, `compile`)
+        }
       }
     }
 
@@ -719,7 +777,7 @@ function finishComponentSetup(
   }
 
   // support for 2.x options
-  if (__FEATURE_OPTIONS_API__) {
+  if (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {
     currentInstance = instance
     pauseTracking()
     applyOptions(instance, Component)

packages/runtime-core/src/componentEmits.ts

@@ -21,6 +21,8 @@ import { warn } from './warning'
 import { UnionToIntersection } from './helpers/typeUtils'
 import { devtoolsComponentEmit } from './devtools'
 import { AppContext } from './apiCreateApp'
+import { emit as compatInstanceEmit } from './compat/instanceEventEmitter'
+import { compatModelEventPrefix, compatModelEmit } from './compat/vModel'
 
 export type ObjectEmitsOptions = Record<
   string,
@@ -56,7 +58,14 @@ export function emit(
       propsOptions: [propsOptions]
     } = instance
     if (emitsOptions) {
-      if (!(event in emitsOptions)) {
+      if (
+        !(event in emitsOptions) &&
+        !(
+          __COMPAT__ &&
+          (event.startsWith('hook:') ||
+            event.startsWith(compatModelEventPrefix))
+        )
+      ) {
         if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
           warn(
             `Component emitted event "${event}" but it is neither declared in ` +
@@ -148,6 +157,11 @@ export function emit(
       args
     )
   }
+
+  if (__COMPAT__) {
+    compatModelEmit(instance, event, args)
+    return compatInstanceEmit(instance, event, args)
+  }
 }
 
 export function normalizeEmitsOptions(
@@ -205,6 +219,11 @@ export function isEmitListener(
   if (!options || !isOn(key)) {
     return false
   }
+
+  if (__COMPAT__ && key.startsWith(compatModelEventPrefix)) {
+    return true
+  }
+
   key = key.slice(2).replace(/Once$/, '')
   return (
     hasOwn(options, key[0].toLowerCase() + key.slice(1)) ||

packages/runtime-core/src/componentOptions.ts

@@ -65,6 +65,19 @@ import { warn } from './warning'
 import { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { UnionToIntersection } from './helpers/typeUtils'
+import { deepMergeData } from './compat/data'
+import { DeprecationTypes } from './compat/compatConfig'
+import {
+  CompatConfig,
+  isCompatEnabled,
+  softAssertCompatEnabled
+} from './compat/compatConfig'
+import {
+  AssetTypes,
+  COMPONENTS,
+  DIRECTIVES,
+  FILTERS
+} from './helpers/resolveAssets'
 
 /**
  * Interface for declaring custom options.
@@ -137,6 +150,9 @@ export interface ComponentOptionsBase<
   expose?: string[]
   serverPrefetch?(): Promise<any>
 
+  // Runtime compiler only -----------------------------------------------------
+  compilerOptions?: RuntimeCompilerOptions
+
   // Internal ------------------------------------------------------------------
 
   /**
@@ -190,6 +206,16 @@ export interface ComponentOptionsBase<
   __defaults?: Defaults
 }
 
+/**
+ * Subset of compiler options that makes sense for the runtime.
+ */
+export interface RuntimeCompilerOptions {
+  isCustomElement?: (tag: string) => boolean
+  whitespace?: 'preserve' | 'condense'
+  comments?: boolean
+  delimiters?: [string, string]
+}
+
 export type ComponentOptionsWithoutProps<
   Props = {},
   RawBindings = {},
@@ -347,10 +373,11 @@ export type ExtractComputedReturns<T extends any> = {
     : T[key] extends (...args: any[]) => infer TReturn ? TReturn : never
 }
 
-type WatchOptionItem =
-  | string
-  | WatchCallback
-  | { handler: WatchCallback | string } & WatchOptions
+export type ObjectWatchOptionItem = {
+  handler: WatchCallback | string
+} & WatchOptions
+
+type WatchOptionItem = string | WatchCallback | ObjectWatchOptionItem
 
 type ComponentWatchOptionItem = WatchOptionItem | WatchOptionItem[]
 
@@ -371,6 +398,8 @@ interface LegacyOptions<
   Mixin extends ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin
 > {
+  compatConfig?: CompatConfig
+
   // allow any custom options
   [key: string]: any
 
@@ -404,6 +433,9 @@ interface LegacyOptions<
   provide?: Data | Function
   inject?: ComponentInjectOptions
 
+  // assets
+  filters?: Record<string, Function>
+
   // composition
   mixins?: Mixin[]
   extends?: Extends
@@ -427,7 +459,10 @@ interface LegacyOptions<
   renderTriggered?: DebuggerHook
   errorCaptured?: ErrorCapturedHook
 
-  // runtime compile only
+  /**
+   * runtime compile only
+   * @deprecated use `compilerOptions.delimiters` instead.
+   */
   delimiters?: [string, string]
 
   /**
@@ -490,6 +525,10 @@ export function applyOptions(
   deferredProvide: (Data | Function)[] = [],
   asMixin: boolean = false
 ) {
+  if (__COMPAT__ && isFunction(options)) {
+    options = options.options
+  }
+
   const {
     // composition
     mixins,
@@ -501,9 +540,6 @@ export function applyOptions(
     watch: watchOptions,
     provide: provideOptions,
     inject: injectOptions,
-    // assets
-    components,
-    directives,
     // lifecycle
     beforeMount,
     mounted,
@@ -588,31 +624,7 @@ export function applyOptions(
   // - watch (deferred since it relies on `this` access)
 
   if (injectOptions) {
-    if (isArray(injectOptions)) {
-      for (let i = 0; i < injectOptions.length; i++) {
-        const key = injectOptions[i]
-        ctx[key] = inject(key)
-        if (__DEV__) {
-          checkDuplicateProperties!(OptionTypes.INJECT, key)
-        }
-      }
-    } else {
-      for (const key in injectOptions) {
-        const opt = injectOptions[key]
-        if (isObject(opt)) {
-          ctx[key] = inject(
-            opt.from || key,
-            opt.default,
-            true /* treat default function as factory */
-          )
-        } else {
-          ctx[key] = inject(opt)
-        }
-        if (__DEV__) {
-          checkDuplicateProperties!(OptionTypes.INJECT, key)
-        }
-      }
-    }
+    resolveInjections(injectOptions, ctx, checkDuplicateProperties)
   }
 
   if (methods) {
@@ -736,25 +748,10 @@ export function applyOptions(
   // To reduce memory usage, only components with mixins or extends will have
   // resolved asset registry attached to instance.
   if (asMixin) {
-    if (components) {
-      extend(
-        instance.components ||
-          (instance.components = extend(
-            {},
-            (instance.type as ComponentOptions).components
-          ) as Record<string, ConcreteComponent>),
-        components
-      )
-    }
-    if (directives) {
-      extend(
-        instance.directives ||
-          (instance.directives = extend(
-            {},
-            (instance.type as ComponentOptions).directives
-          )),
-        directives
-      )
+    resolveInstanceAssets(instance, options, COMPONENTS)
+    resolveInstanceAssets(instance, options, DIRECTIVES)
+    if (__COMPAT__ && isCompatEnabled(DeprecationTypes.FILTERS, instance)) {
+      resolveInstanceAssets(instance, options, FILTERS)
     }
   }
 
@@ -795,19 +792,28 @@ export function applyOptions(
   if (renderTriggered) {
     onRenderTriggered(renderTriggered.bind(publicThis))
   }
-  if (__DEV__ && beforeDestroy) {
-    warn(`\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`)
-  }
   if (beforeUnmount) {
     onBeforeUnmount(beforeUnmount.bind(publicThis))
   }
-  if (__DEV__ && destroyed) {
-    warn(`\`destroyed\` has been renamed to \`unmounted\`.`)
-  }
   if (unmounted) {
     onUnmounted(unmounted.bind(publicThis))
   }
 
+  if (__COMPAT__) {
+    if (
+      beforeDestroy &&
+      softAssertCompatEnabled(DeprecationTypes.OPTIONS_BEFORE_DESTROY, instance)
+    ) {
+      onBeforeUnmount(beforeDestroy.bind(publicThis))
+    }
+    if (
+      destroyed &&
+      softAssertCompatEnabled(DeprecationTypes.OPTIONS_DESTROYED, instance)
+    ) {
+      onUnmounted(destroyed.bind(publicThis))
+    }
+  }
+
   if (isArray(expose)) {
     if (!asMixin) {
       if (expose.length) {
@@ -824,6 +830,55 @@ export function applyOptions(
   }
 }
 
+function resolveInstanceAssets(
+  instance: ComponentInternalInstance,
+  mixin: ComponentOptions,
+  type: AssetTypes
+) {
+  if (mixin[type]) {
+    extend(
+      instance[type] ||
+        (instance[type] = extend(
+          {},
+          (instance.type as ComponentOptions)[type]
+        ) as any),
+      mixin[type]
+    )
+  }
+}
+
+export function resolveInjections(
+  injectOptions: ComponentInjectOptions,
+  ctx: any,
+  checkDuplicateProperties = NOOP as any
+) {
+  if (isArray(injectOptions)) {
+    for (let i = 0; i < injectOptions.length; i++) {
+      const key = injectOptions[i]
+      ctx[key] = inject(key)
+      if (__DEV__) {
+        checkDuplicateProperties!(OptionTypes.INJECT, key)
+      }
+    }
+  } else {
+    for (const key in injectOptions) {
+      const opt = injectOptions[key]
+      if (isObject(opt)) {
+        ctx[key] = inject(
+          opt.from || key,
+          opt.default,
+          true /* treat default function as factory */
+        )
+      } else {
+        ctx[key] = inject(opt)
+      }
+      if (__DEV__) {
+        checkDuplicateProperties!(OptionTypes.INJECT, key)
+      }
+    }
+  }
+}
+
 function callSyncHook(
   name: 'beforeCreate' | 'created',
   type: LifecycleHooks,
@@ -854,7 +909,13 @@ function callHookWithMixinAndExtends(
     }
   }
   if (selfHook) {
-    callWithAsyncErrorHandling(selfHook.bind(instance.proxy!), instance, type)
+    callWithAsyncErrorHandling(
+      __COMPAT__ && isArray(selfHook)
+        ? selfHook.map(h => h.bind(instance.proxy!))
+        : selfHook.bind(instance.proxy!),
+      instance,
+      type
+    )
   }
 }
 
@@ -904,11 +965,18 @@ function resolveData(
     instance.data = reactive(data)
   } else {
     // existing data: this is a mixin or extends.
-    extend(instance.data, data)
+    if (
+      __COMPAT__ &&
+      isCompatEnabled(DeprecationTypes.OPTIONS_DATA_MERGE, instance)
+    ) {
+      deepMergeData(instance.data, data, instance)
+    } else {
+      extend(instance.data, data)
+    }
   }
 }
 
-function createWatcher(
+export function createWatcher(
   raw: ComponentWatchOptionItem,
   ctx: Data,
   publicThis: ComponentPublicInstance,
@@ -958,19 +1026,30 @@ export function resolveMergedOptions(
   return (raw.__merged = options)
 }
 
-function mergeOptions(to: any, from: any, instance: ComponentInternalInstance) {
-  const strats = instance.appContext.config.optionMergeStrategies
+export function mergeOptions(
+  to: any,
+  from: any,
+  instance?: ComponentInternalInstance | null,
+  strats = instance && instance.appContext.config.optionMergeStrategies
+) {
+  if (__COMPAT__ && isFunction(from)) {
+    from = from.options
+  }
+
   const { mixins, extends: extendsOptions } = from
 
-  extendsOptions && mergeOptions(to, extendsOptions, instance)
+  extendsOptions && mergeOptions(to, extendsOptions, instance, strats)
   mixins &&
-    mixins.forEach((m: ComponentOptionsMixin) => mergeOptions(to, m, instance))
+    mixins.forEach((m: ComponentOptionsMixin) =>
+      mergeOptions(to, m, instance, strats)
+    )
 
   for (const key in from) {
     if (strats && hasOwn(strats, key)) {
-      to[key] = strats[key](to[key], from[key], instance.proxy, key)
+      to[key] = strats[key](to[key], from[key], instance && instance.proxy, key)
     } else {
       to[key] = from[key]
     }
   }
+  return to
 }

packages/runtime-core/src/componentProps.ts

@@ -33,6 +33,10 @@ import {
 import { isEmitListener } from './componentEmits'
 import { InternalObjectKey } from './vnode'
 import { AppContext } from './apiCreateApp'
+import { createPropsDefaultThis } from './compat/props'
+import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig'
+import { DeprecationTypes } from './compat/compatConfig'
+import { shouldSkipAttr } from './compat/attrsFallthrough'
 
 export type ComponentPropsOptions<P = Data> =
   | ComponentObjectPropsOptions<P>
@@ -184,6 +188,7 @@ export function updateProps(
   } = instance
   const rawCurrentProps = toRaw(props)
   const [options] = instance.propsOptions
+  let hasAttrsChanged = false
 
   if (
     // always force full diff in dev
@@ -209,7 +214,10 @@ export function updateProps(
           // attr / props separation was done on init and will be consistent
           // in this code path, so just check if attrs have it.
           if (hasOwn(attrs, key)) {
-            attrs[key] = value
+            if (value !== attrs[key]) {
+              attrs[key] = value
+              hasAttrsChanged = true
+            }
           } else {
             const camelizedKey = camelize(key)
             props[camelizedKey] = resolvePropValue(
@@ -221,13 +229,21 @@ export function updateProps(
             )
           }
         } else {
-          attrs[key] = value
+          if (__COMPAT__ && shouldSkipAttr(key, attrs[key], instance)) {
+            continue
+          }
+          if (value !== attrs[key]) {
+            attrs[key] = value
+            hasAttrsChanged = true
+          }
         }
       }
     }
   } else {
     // full props update.
-    setFullProps(instance, rawProps, props, attrs)
+    if (setFullProps(instance, rawProps, props, attrs)) {
+      hasAttrsChanged = true
+    }
     // in case of dynamic props, check if we need to delete keys from
     // the props object
     let kebabKey: string
@@ -267,13 +283,16 @@ export function updateProps(
       for (const key in attrs) {
         if (!rawProps || !hasOwn(rawProps, key)) {
           delete attrs[key]
+          hasAttrsChanged = true
         }
       }
     }
   }
 
   // trigger updates for $attrs in case it's used in component slots
-  trigger(instance, TriggerOpTypes.SET, '$attrs')
+  if (hasAttrsChanged) {
+    trigger(instance, TriggerOpTypes.SET, '$attrs')
+  }
 
   if (__DEV__) {
     validateProps(rawProps || {}, props, instance)
@@ -287,12 +306,27 @@ function setFullProps(
   attrs: Data
 ) {
   const [options, needCastKeys] = instance.propsOptions
+  let hasAttrsChanged = false
   if (rawProps) {
     for (const key in rawProps) {
       // key, ref are reserved and never passed down
       if (isReservedProp(key)) {
         continue
       }
+
+      if (__COMPAT__) {
+        if (key.startsWith('onHook:')) {
+          softAssertCompatEnabled(
+            DeprecationTypes.INSTANCE_EVENT_HOOKS,
+            instance,
+            key.slice(2).toLowerCase()
+          )
+        }
+        if (key === 'inline-template') {
+          continue
+        }
+      }
+
       const value = rawProps[key]
       // prop option names are camelized during normalization, so to support
       // kebab -> camel conversion here we need to camelize the key.
@@ -303,7 +337,13 @@ function setFullProps(
         // Any non-declared (either as a prop or an emitted event) props are put
         // into a separate `attrs` object for spreading. Make sure to preserve
         // original key casing
-        attrs[key] = value
+        if (__COMPAT__ && shouldSkipAttr(key, attrs[key], instance)) {
+          continue
+        }
+        if (value !== attrs[key]) {
+          attrs[key] = value
+          hasAttrsChanged = true
+        }
       }
     }
   }
@@ -321,6 +361,8 @@ function setFullProps(
       )
     }
   }
+
+  return hasAttrsChanged
 }
 
 function resolvePropValue(
@@ -342,7 +384,13 @@ function resolvePropValue(
           value = propsDefaults[key]
         } else {
           setCurrentInstance(instance)
-          value = propsDefaults[key] = defaultValue(props)
+          value = propsDefaults[key] = defaultValue.call(
+            __COMPAT__ &&
+            isCompatEnabled(DeprecationTypes.PROPS_DEFAULT_THIS, instance)
+              ? createPropsDefaultThis(instance, props, key)
+              : null,
+            props
+          )
           setCurrentInstance(null)
         }
       } else {
@@ -381,6 +429,9 @@ export function normalizePropsOptions(
   let hasExtends = false
   if (__FEATURE_OPTIONS_API__ && !isFunction(comp)) {
     const extendProps = (raw: ComponentOptions) => {
+      if (__COMPAT__ && isFunction(raw)) {
+        raw = raw.options
+      }
       hasExtends = true
       const [props, keys] = normalizePropsOptions(raw, appContext, true)
       extend(normalized, props)

packages/runtime-core/src/componentPublicInstance.ts

@@ -11,7 +11,8 @@ import {
   isGloballyWhitelisted,
   NOOP,
   extend,
-  isString
+  isString,
+  isFunction
 } from '@vue/shared'
 import {
   ReactiveEffect,
@@ -40,6 +41,7 @@ import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { warn } from './warning'
 import { UnionToIntersection } from './helpers/typeUtils'
+import { installCompatInstanceProperties } from './compat/instance'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -201,7 +203,10 @@ export type ComponentPublicInstance<
   M &
   ComponentCustomProperties
 
-type PublicPropertiesMap = Record<string, (i: ComponentInternalInstance) => any>
+export type PublicPropertiesMap = Record<
+  string,
+  (i: ComponentInternalInstance) => any
+>
 
 /**
  * #2437 In Vue 3, functional components do not have a public instance proxy but
@@ -233,6 +238,10 @@ const publicPropertiesMap: PublicPropertiesMap = extend(Object.create(null), {
   $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
 } as PublicPropertiesMap)
 
+if (__COMPAT__) {
+  installCompatInstanceProperties(publicPropertiesMap)
+}
+
 const enum AccessTypes {
   SETUP,
   DATA,
@@ -335,7 +344,17 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       ((globalProperties = appContext.config.globalProperties),
       hasOwn(globalProperties, key))
     ) {
-      return globalProperties[key]
+      if (__COMPAT__) {
+        const desc = Object.getOwnPropertyDescriptor(globalProperties, key)!
+        if (desc.get) {
+          return desc.get.call(instance.proxy)
+        } else {
+          const val = globalProperties[key]
+          return isFunction(val) ? val.bind(instance.proxy) : val
+        }
+      } else {
+        return globalProperties[key]
+      }
     } else if (
       __DEV__ &&
       currentRenderingInstance &&
@@ -483,17 +502,6 @@ export function createRenderContext(instance: ComponentInternalInstance) {
     })
   })
 
-  // expose global properties
-  const { globalProperties } = instance.appContext.config
-  Object.keys(globalProperties).forEach(key => {
-    Object.defineProperty(target, key, {
-      configurable: true,
-      enumerable: false,
-      get: () => globalProperties[key],
-      set: NOOP
-    })
-  })
-
   return target as ComponentRenderContext
 }
 

packages/runtime-core/src/componentRenderContext.ts

@@ -25,6 +25,10 @@ export function setCurrentRenderingInstance(
   const prev = currentRenderingInstance
   currentRenderingInstance = instance
   currentScopeId = (instance && instance.type.__scopeId) || null
+  // v2 pre-compiled components uses _scopeId instead of __scopeId
+  if (__COMPAT__ && !currentScopeId) {
+    currentScopeId = (instance && (instance.type as any)._scopeId) || null
+  }
   return prev
 }
 

packages/runtime-core/src/componentRenderUtils.ts

@@ -1,7 +1,8 @@
 import {
   ComponentInternalInstance,
   FunctionalComponent,
-  Data
+  Data,
+  getComponentName
 } from './component'
 import {
   VNode,
@@ -20,6 +21,11 @@ import { isHmrUpdating } from './hmr'
 import { NormalizedProps } from './componentProps'
 import { isEmitListener } from './componentEmits'
 import { setCurrentRenderingInstance } from './componentRenderContext'
+import {
+  DeprecationTypes,
+  isCompatEnabled,
+  warnDeprecation
+} from './compat/compatConfig'
 
 /**
  * dev only flag to track whether $attrs was used during render.
@@ -117,7 +123,7 @@ export function renderComponentRoot(
       ;[root, setRoot] = getChildRoot(result)
     }
 
-    if (Component.inheritAttrs !== false && fallthroughAttrs) {
+    if (fallthroughAttrs && Component.inheritAttrs !== false) {
       const keys = Object.keys(fallthroughAttrs)
       const { shapeFlag } = root
       if (keys.length) {
@@ -175,6 +181,29 @@ export function renderComponentRoot(
       }
     }
 
+    if (
+      __COMPAT__ &&
+      isCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, instance) &&
+      vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT &&
+      (root.shapeFlag & ShapeFlags.ELEMENT ||
+        root.shapeFlag & ShapeFlags.COMPONENT)
+    ) {
+      const { class: cls, style } = vnode.props || {}
+      if (cls || style) {
+        if (__DEV__ && Component.inheritAttrs === false) {
+          warnDeprecation(
+            DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE,
+            instance,
+            getComponentName(instance.type)
+          )
+        }
+        root = cloneVNode(root, {
+          class: cls,
+          style: style
+        })
+      }
+    }
+
     // inherit directives
     if (vnode.dirs) {
       if (__DEV__ && !isElementRoot(root)) {

packages/runtime-core/src/componentSlots.ts

@@ -19,6 +19,7 @@ import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
 import { withCtx } from './componentRenderContext'
 import { isHmrUpdating } from './hmr'
+import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
 
 export type Slot = (...args: any[]) => VNode[]
 
@@ -72,7 +73,11 @@ const normalizeSlot = (
     return normalizeSlotValue(rawSlot(props))
   }, ctx) as Slot
 
-const normalizeObjectSlots = (rawSlots: RawSlots, slots: InternalSlots) => {
+const normalizeObjectSlots = (
+  rawSlots: RawSlots,
+  slots: InternalSlots,
+  instance: ComponentInternalInstance
+) => {
   const ctx = rawSlots._ctx
   for (const key in rawSlots) {
     if (isInternalKey(key)) continue
@@ -80,7 +85,13 @@ const normalizeObjectSlots = (rawSlots: RawSlots, slots: InternalSlots) => {
     if (isFunction(value)) {
       slots[key] = normalizeSlot(key, value, ctx)
     } else if (value != null) {
-      if (__DEV__) {
+      if (
+        __DEV__ &&
+        !(
+          __COMPAT__ &&
+          isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance)
+        )
+      ) {
         warn(
           `Non-function value encountered for slot "${key}". ` +
             `Prefer function slots for better performance.`
@@ -96,7 +107,11 @@ const normalizeVNodeSlots = (
   instance: ComponentInternalInstance,
   children: VNodeNormalizedChildren
 ) => {
-  if (__DEV__ && !isKeepAlive(instance.vnode)) {
+  if (
+    __DEV__ &&
+    !isKeepAlive(instance.vnode) &&
+    !(__COMPAT__ && isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance))
+  ) {
     warn(
       `Non-function value encountered for default slot. ` +
         `Prefer function slots for better performance.`
@@ -117,7 +132,11 @@ export const initSlots = (
       // make compiler marker non-enumerable
       def(children as InternalSlots, '_', type)
     } else {
-      normalizeObjectSlots(children as RawSlots, (instance.slots = {}))
+      normalizeObjectSlots(
+        children as RawSlots,
+        (instance.slots = {}),
+        instance
+      )
     }
   } else {
     instance.slots = {}
@@ -162,7 +181,7 @@ export const updateSlots = (
       }
     } else {
       needDeletionCheck = !(children as RawSlots).$stable
-      normalizeObjectSlots(children as RawSlots, slots)
+      normalizeObjectSlots(children as RawSlots, slots, instance)
     }
     deletionComparisonTarget = children as RawSlots
   } else if (children) {

packages/runtime-core/src/components/BaseTransition.ts

@@ -1,7 +1,8 @@
 import {
   getCurrentInstance,
   SetupContext,
-  ComponentInternalInstance
+  ComponentInternalInstance,
+  ComponentOptions
 } from '../component'
 import {
   cloneVNode,
@@ -110,7 +111,7 @@ export function useTransitionState(): TransitionState {
 
 const TransitionHookValidator = [Function, Array]
 
-const BaseTransitionImpl = {
+const BaseTransitionImpl: ComponentOptions = {
   name: `BaseTransition`,
 
   props: {
@@ -250,6 +251,10 @@ const BaseTransitionImpl = {
   }
 }
 
+if (__COMPAT__) {
+  BaseTransitionImpl.__isBuiltIn = true
+}
+
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
 export const BaseTransition = (BaseTransitionImpl as any) as {

packages/runtime-core/src/components/KeepAlive.ts

@@ -5,7 +5,8 @@ import {
   ComponentInternalInstance,
   LifecycleHooks,
   currentInstance,
-  getComponentName
+  getComponentName,
+  ComponentOptions
 } from '../component'
 import { VNode, cloneVNode, isVNode, VNodeProps } from '../vnode'
 import { warn } from '../warning'
@@ -63,7 +64,7 @@ export interface KeepAliveContext extends ComponentRenderContext {
 export const isKeepAlive = (vnode: VNode): boolean =>
   (vnode.type as any).__isKeepAlive
 
-const KeepAliveImpl = {
+const KeepAliveImpl: ComponentOptions = {
   name: `KeepAlive`,
 
   // Marker for special handling inside the renderer. We are not using a ===
@@ -313,6 +314,10 @@ const KeepAliveImpl = {
   }
 }
 
+if (__COMPAT__) {
+  KeepAliveImpl.__isBuildIn = true
+}
+
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
 export const KeepAlive = (KeepAliveImpl as any) as {

packages/runtime-core/src/directives.ts

@@ -18,6 +18,7 @@ import { ComponentInternalInstance, Data } from './component'
 import { currentRenderingInstance } from './componentRenderContext'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { ComponentPublicInstance } from './componentPublicInstance'
+import { mapCompatDirectiveHook } from './compat/customDirective'
 
 export interface DirectiveBinding<V = any> {
   instance: ComponentPublicInstance | null
@@ -124,7 +125,10 @@ export function invokeDirectiveHook(
     if (oldBindings) {
       binding.oldValue = oldBindings[i].value
     }
-    const hook = binding.dir[name] as DirectiveHook | undefined
+    let hook = binding.dir[name] as DirectiveHook | DirectiveHook[] | undefined
+    if (__COMPAT__ && !hook) {
+      hook = mapCompatDirectiveHook(name, binding.dir, instance)
+    }
     if (hook) {
       callWithAsyncErrorHandling(hook, instance, ErrorCodes.DIRECTIVE_HOOK, [
         vnode.el,

packages/runtime-core/src/helpers/resolveAssets.ts

@@ -10,8 +10,11 @@ import { camelize, capitalize, isString } from '@vue/shared'
 import { warn } from '../warning'
 import { VNodeTypes } from '../vnode'
 
-const COMPONENTS = 'components'
-const DIRECTIVES = 'directives'
+export const COMPONENTS = 'components'
+export const DIRECTIVES = 'directives'
+export const FILTERS = 'filters'
+
+export type AssetTypes = typeof COMPONENTS | typeof DIRECTIVES | typeof FILTERS
 
 /**
  * @private
@@ -44,6 +47,14 @@ export function resolveDirective(name: string): Directive | undefined {
   return resolveAsset(DIRECTIVES, name)
 }
 
+/**
+ * v2 compat only
+ * @internal
+ */
+export function resolveFilter(name: string): Function | undefined {
+  return resolveAsset(FILTERS, name)
+}
+
 /**
  * @private
  * overload 1: components
@@ -60,8 +71,11 @@ function resolveAsset(
   name: string
 ): Directive | undefined
 // implementation
+// overload 3: filters (compat only)
+function resolveAsset(type: typeof FILTERS, name: string): Function | undefined
+// implementation
 function resolveAsset(
-  type: typeof COMPONENTS | typeof DIRECTIVES,
+  type: AssetTypes,
   name: string,
   warnMissing = true,
   maybeSelfReference = false

packages/runtime-core/src/index.ts

@@ -179,7 +179,8 @@ export {
   ComponentOptionsBase,
   RenderFunction,
   MethodOptions,
-  ComputedOptions
+  ComputedOptions,
+  RuntimeCompilerOptions
 } from './componentOptions'
 export { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export {
@@ -279,3 +280,38 @@ const _ssrUtils = {
  * @internal
  */
 export const ssrUtils = (__NODE_JS__ ? _ssrUtils : null) as typeof _ssrUtils
+
+// 2.x COMPAT ------------------------------------------------------------------
+
+export { DeprecationTypes } from './compat/compatConfig'
+export { CompatVue } from './compat/global'
+export { LegacyConfig } from './compat/globalConfig'
+
+import { warnDeprecation } from './compat/compatConfig'
+import { createCompatVue } from './compat/global'
+import {
+  isCompatEnabled,
+  checkCompatEnabled,
+  softAssertCompatEnabled
+} from './compat/compatConfig'
+import { resolveFilter as _resolveFilter } from './helpers/resolveAssets'
+
+/**
+ * @internal only exposed in compat builds
+ */
+export const resolveFilter = __COMPAT__ ? _resolveFilter : null
+
+const _compatUtils = {
+  warnDeprecation,
+  createCompatVue,
+  isCompatEnabled,
+  checkCompatEnabled,
+  softAssertCompatEnabled
+}
+
+/**
+ * @internal only exposed in compat builds.
+ */
+export const compatUtils = (__COMPAT__
+  ? _compatUtils
+  : null) as typeof _compatUtils

packages/runtime-core/src/renderer.ts

@@ -76,7 +76,6 @@ import {
 import { createHydrationFunctions, RootHydrateFunction } from './hydration'
 import { invokeDirectiveHook } from './directives'
 import { startMeasure, endMeasure } from './profiling'
-import { ComponentPublicInstance } from './componentPublicInstance'
 import {
   devtoolsComponentAdded,
   devtoolsComponentRemoved,
@@ -85,6 +84,9 @@ import {
 } from './devtools'
 import { initFeatureFlags } from './featureFlags'
 import { isAsyncWrapper } from './apiAsyncComponent'
+import { isCompatEnabled } from './compat/compatConfig'
+import { DeprecationTypes } from './compat/compatConfig'
+import { registerLegacyRef } from './compat/ref'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>
@@ -307,7 +309,8 @@ export const setRef = (
   rawRef: VNodeNormalizedRef,
   oldRawRef: VNodeNormalizedRef | null,
   parentSuspense: SuspenseBoundary | null,
-  vnode: VNode | null
+  vnode: VNode,
+  isUnmount = false
 ) => {
   if (isArray(rawRef)) {
     rawRef.forEach((r, i) =>
@@ -315,26 +318,25 @@ export const setRef = (
         r,
         oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
         parentSuspense,
-        vnode
+        vnode,
+        isUnmount
       )
     )
     return
   }
 
-  let value: ComponentPublicInstance | RendererNode | Record<string, any> | null
-  if (!vnode) {
-    // means unmount
-    value = null
-  } else if (isAsyncWrapper(vnode)) {
+  if (isAsyncWrapper(vnode) && !isUnmount) {
     // when mounting async components, nothing needs to be done,
     // because the template ref is forwarded to inner component
     return
-  } else if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-    value = vnode.component!.exposed || vnode.component!.proxy
-  } else {
-    value = vnode.el
   }
 
+  const refValue =
+    vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
+      ? vnode.component!.exposed || vnode.component!.proxy
+      : vnode.el
+  const value = isUnmount ? null : refValue
+
   const { i: owner, r: ref } = rawRef
   if (__DEV__ && !owner) {
     warn(
@@ -347,7 +349,7 @@ export const setRef = (
   const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
   const setupState = owner.setupState
 
-  // unset old ref
+  // dynamic ref changed. unset old ref
   if (oldRef != null && oldRef !== ref) {
     if (isString(oldRef)) {
       refs[oldRef] = null
@@ -361,7 +363,11 @@ export const setRef = (
 
   if (isString(ref)) {
     const doSet = () => {
-      refs[ref] = value
+      if (__COMPAT__ && isCompatEnabled(DeprecationTypes.V_FOR_REF, owner)) {
+        registerLegacyRef(refs, ref, refValue, owner, rawRef.f, isUnmount)
+      } else {
+        refs[ref] = value
+      }
       if (hasOwn(setupState, ref)) {
         setupState[ref] = value
       }
@@ -440,6 +446,9 @@ function baseCreateRenderer(
   options: RendererOptions,
   createHydrationFns?: typeof createHydrationFunctions
 ): any {
+  const isHookEventCompatEnabled =
+    __COMPAT__ && isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, null)
+
   // compile-time feature flags check
   if (__ESM_BUNDLER__ && !__TEST__) {
     initFeatureFlags()
@@ -579,7 +588,7 @@ function baseCreateRenderer(
 
     // set ref
     if (ref != null && parentComponent) {
-      setRef(ref, n1 && n1.ref, parentSuspense, n2)
+      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
     }
   }
 
@@ -1292,11 +1301,16 @@ function baseCreateRenderer(
     isSVG,
     optimized
   ) => {
-    const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(
-      initialVNode,
-      parentComponent,
-      parentSuspense
-    ))
+    // 2.x compat may pre-creaate the component instance before actually
+    // mounting
+    const compatMountInstance = __COMPAT__ && initialVNode.component
+    const instance: ComponentInternalInstance =
+      compatMountInstance ||
+      (initialVNode.component = createComponentInstance(
+        initialVNode,
+        parentComponent,
+        parentSuspense
+      ))
 
     if (__DEV__ && instance.type.__hmrId) {
       registerHMR(instance)
@@ -1313,12 +1327,14 @@ function baseCreateRenderer(
     }
 
     // resolve props and slots for setup context
-    if (__DEV__) {
-      startMeasure(instance, `init`)
-    }
-    setupComponent(instance)
-    if (__DEV__) {
-      endMeasure(instance, `init`)
+    if (!(__COMPAT__ && compatMountInstance)) {
+      if (__DEV__) {
+        startMeasure(instance, `init`)
+      }
+      setupComponent(instance)
+      if (__DEV__) {
+        endMeasure(instance, `init`)
+      }
     }
 
     // setup() is async. This component relies on async logic to be resolved
@@ -1410,6 +1426,9 @@ function baseCreateRenderer(
         if ((vnodeHook = props && props.onVnodeBeforeMount)) {
           invokeVNodeHook(vnodeHook, parent, initialVNode)
         }
+        if (__COMPAT__ && isHookEventCompatEnabled) {
+          instance.emit('hook:beforeMount')
+        }
 
         // render
         if (__DEV__) {
@@ -1460,19 +1479,29 @@ function baseCreateRenderer(
         // onVnodeMounted
         if ((vnodeHook = props && props.onVnodeMounted)) {
           const scopedInitialVNode = initialVNode
-          queuePostRenderEffect(() => {
-            invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode)
-          }, parentSuspense)
+          queuePostRenderEffect(
+            () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
+            parentSuspense
+          )
         }
+        if (__COMPAT__ && isHookEventCompatEnabled) {
+          queuePostRenderEffect(
+            () => instance.emit('hook:mounted'),
+            parentSuspense
+          )
+        }
+
         // activated hook for keep-alive roots.
         // #1742 activated hook must be accessed after first render
         // since the hook may be injected by a child keep-alive
-        const { a } = instance
-        if (
-          a &&
-          initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
-        ) {
-          queuePostRenderEffect(a, parentSuspense)
+        if (initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
+          instance.a && queuePostRenderEffect(instance.a, parentSuspense)
+          if (__COMPAT__ && isHookEventCompatEnabled) {
+            queuePostRenderEffect(
+              () => instance.emit('hook:activated'),
+              parentSuspense
+            )
+          }
         }
         instance.isMounted = true
 
@@ -1508,6 +1537,9 @@ function baseCreateRenderer(
         if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
           invokeVNodeHook(vnodeHook, parent, next, vnode)
         }
+        if (__COMPAT__ && isHookEventCompatEnabled) {
+          instance.emit('hook:beforeUpdate')
+        }
 
         // render
         if (__DEV__) {
@@ -1550,9 +1582,16 @@ function baseCreateRenderer(
         }
         // onVnodeUpdated
         if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
-          queuePostRenderEffect(() => {
-            invokeVNodeHook(vnodeHook!, parent, next!, vnode)
-          }, parentSuspense)
+          queuePostRenderEffect(
+            () => invokeVNodeHook(vnodeHook!, parent, next!, vnode),
+            parentSuspense
+          )
+        }
+        if (__COMPAT__ && isHookEventCompatEnabled) {
+          queuePostRenderEffect(
+            () => instance.emit('hook:updated'),
+            parentSuspense
+          )
         }
 
         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
@@ -1564,6 +1603,11 @@ function baseCreateRenderer(
         }
       }
     }, __DEV__ ? createDevEffectOptions(instance) : prodEffectOptions)
+
+    if (__DEV__) {
+      // @ts-ignore
+      instance.update.ownerInstance = instance
+    }
   }
 
   const updateComponentPreRender = (
@@ -2073,7 +2117,7 @@ function baseCreateRenderer(
     } = vnode
     // unset ref
     if (ref != null) {
-      setRef(ref, null, parentSuspense, null)
+      setRef(ref, null, parentSuspense, vnode, true)
     }
 
     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
@@ -2204,10 +2248,15 @@ function baseCreateRenderer(
     }
 
     const { bum, effects, update, subTree, um } = instance
+
     // beforeUnmount hook
     if (bum) {
       invokeArrayFns(bum)
     }
+    if (__COMPAT__ && isHookEventCompatEnabled) {
+      instance.emit('hook:beforeDestroy')
+    }
+
     if (effects) {
       for (let i = 0; i < effects.length; i++) {
         stop(effects[i])
@@ -2223,6 +2272,12 @@ function baseCreateRenderer(
     if (um) {
       queuePostRenderEffect(um, parentSuspense)
     }
+    if (__COMPAT__ && isHookEventCompatEnabled) {
+      queuePostRenderEffect(
+        () => instance.emit('hook:destroyed'),
+        parentSuspense
+      )
+    }
     queuePostRenderEffect(() => {
       instance.isUnmounted = true
     }, parentSuspense)

packages/runtime-core/src/scheduler.ts

@@ -1,6 +1,8 @@
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { isArray } from '@vue/shared'
 import { ComponentPublicInstance } from './componentPublicInstance'
+import { ComponentInternalInstance, getComponentName } from './component'
+import { warn } from './warning'
 
 export interface SchedulerJob {
   (): void
@@ -22,6 +24,7 @@ export interface SchedulerJob {
    * stabilizes (#1727).
    */
   allowRecurse?: boolean
+  ownerInstance?: ComponentInternalInstance
 }
 
 export type SchedulerCb = Function & { id?: number }
@@ -164,8 +167,11 @@ export function flushPreFlushCbs(
       preFlushIndex < activePreFlushCbs.length;
       preFlushIndex++
     ) {
-      if (__DEV__) {
+      if (
+        __DEV__ &&
         checkRecursiveUpdates(seen!, activePreFlushCbs[preFlushIndex])
+      ) {
+        continue
       }
       activePreFlushCbs[preFlushIndex]()
     }
@@ -200,8 +206,11 @@ export function flushPostFlushCbs(seen?: CountMap) {
       postFlushIndex < activePostFlushCbs.length;
       postFlushIndex++
     ) {
-      if (__DEV__) {
+      if (
+        __DEV__ &&
         checkRecursiveUpdates(seen!, activePostFlushCbs[postFlushIndex])
+      ) {
+        continue
       }
       activePostFlushCbs[postFlushIndex]()
     }
@@ -235,8 +244,8 @@ function flushJobs(seen?: CountMap) {
     for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
       const job = queue[flushIndex]
       if (job) {
-        if (__DEV__) {
-          checkRecursiveUpdates(seen!, job)
+        if (__DEV__ && checkRecursiveUpdates(seen!, job)) {
+          continue
         }
         callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
       }
@@ -263,13 +272,18 @@ function checkRecursiveUpdates(seen: CountMap, fn: SchedulerJob | SchedulerCb) {
   } else {
     const count = seen.get(fn)!
     if (count > RECURSION_LIMIT) {
-      throw new Error(
-        `Maximum recursive updates exceeded. ` +
+      const instance = (fn as SchedulerJob).ownerInstance
+      const componentName = instance && getComponentName(instance.type)
+      warn(
+        `Maximum recursive updates exceeded${
+          componentName ? ` in component <${componentName}>` : ``
+        }. ` +
           `This means you have a reactive effect that is mutating its own ` +
           `dependencies and thus recursively triggering itself. Possible sources ` +
           `include component template, render function, updated hook or ` +
           `watcher source function.`
       )
+      return true
     } else {
       seen.set(fn, count + 1)
     }

packages/runtime-core/src/vnode.ts

@@ -41,6 +41,10 @@ import { RendererNode, RendererElement } from './renderer'
 import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets'
 import { hmrDirtyComponents } from './hmr'
 import { setCompiledSlotRendering } from './helpers/renderSlot'
+import { convertLegacyComponent } from './compat/component'
+import { convertLegacyVModelProps } from './compat/vModel'
+import { defineLegacyVNodeProperties } from './compat/renderFn'
+import { convertLegacyRefInFor } from './compat/ref'
 
 export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
   __isFragment: true
@@ -71,6 +75,7 @@ export type VNodeRef =
 export type VNodeNormalizedRefAtom = {
   i: ComponentInternalInstance
   r: VNodeRef
+  f?: boolean // v2 compat only, refInFor marker
 }
 
 export type VNodeNormalizedRef =
@@ -127,10 +132,12 @@ export interface VNode<
    * @internal
    */
   __v_isVNode: true
+
   /**
    * @internal
    */
   [ReactiveFlags.SKIP]: true
+
   type: VNodeTypes
   props: (VNodeProps & ExtraProps) | null
   key: string | number | null
@@ -358,6 +365,11 @@ function _createVNode(
     type = type.__vccOpts
   }
 
+  // 2.x async/functional component compat
+  if (__COMPAT__) {
+    type = convertLegacyComponent(type, currentRenderingInstance)
+  }
+
   // class & style normalization.
   if (props) {
     // for reactive or proxy objects, we need to clone it to enable mutation.
@@ -405,7 +417,7 @@ function _createVNode(
 
   const vnode: VNode = {
     __v_isVNode: true,
-    [ReactiveFlags.SKIP]: true,
+    __v_skip: true,
     type,
     props,
     key: props && normalizeKey(props),
@@ -463,6 +475,12 @@ function _createVNode(
     currentBlock.push(vnode)
   }
 
+  if (__COMPAT__) {
+    convertLegacyVModelProps(vnode)
+    convertLegacyRefInFor(vnode)
+    defineLegacyVNodeProperties(vnode)
+  }
+
   return vnode
 }
 
@@ -475,9 +493,9 @@ export function cloneVNode<T, U>(
   // key enumeration cost.
   const { props, ref, patchFlag, children } = vnode
   const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props
-  return {
+  const cloned: VNode = {
     __v_isVNode: true,
-    [ReactiveFlags.SKIP]: true,
+    __v_skip: true,
     type: vnode.type,
     props: mergedProps,
     key: mergedProps && normalizeKey(mergedProps),
@@ -529,6 +547,10 @@ export function cloneVNode<T, U>(
     el: vnode.el,
     anchor: vnode.anchor
   }
+  if (__COMPAT__) {
+    defineLegacyVNodeProperties(cloned)
+  }
+  return cloned as any
 }
 
 /**
@@ -671,7 +693,7 @@ export function mergeProps(...args: (Data & VNodeProps)[]) {
         const incoming = toMerge[key]
         if (existing !== incoming) {
           ret[key] = existing
-            ? [].concat(existing as any, toMerge[key] as any)
+            ? [].concat(existing as any, incoming as any)
             : incoming
         }
       } else if (key !== '') {

packages/runtime-core/src/warning.ts

@@ -71,7 +71,7 @@ export function warn(msg: string, ...args: any[]) {
   resetTracking()
 }
 
-function getComponentTrace(): ComponentTraceStack {
+export function getComponentTrace(): ComponentTraceStack {
   let currentVNode: VNode | null = stack[stack.length - 1]
   if (!currentVNode) {
     return []