From ed8c3fba531629b2761b683703c9d23f4cc014fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Wed, 5 Apr 2023 00:12:59 +0800
Subject: [PATCH] wip

---
 .../__snapshots__/compileScript.spec.ts.snap  |  86 +++++++
 .../__tests__/compileScript.spec.ts           | 107 ++++++++
 packages/compiler-sfc/src/compileScript.ts    | 237 +++++++++++++-----
 .../__tests__/apiSetupHelpers.spec.ts         |  44 +++-
 packages/runtime-core/src/apiSetupHelpers.ts  |  83 +++++-
 packages/runtime-core/src/index.ts            |   1 +
 packages/sfc-playground/src/App.vue           |   3 +-
 7 files changed, 491 insertions(+), 70 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index ee00977c131..a1d37621345 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -653,6 +653,48 @@ return {  }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel } from 'vue'
+
+export default {
+  props: {
+    \\"modelValue\\": { required: true },
+    \\"count\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const modelValue = _useModel(\\"modelValue\\", { required: true })
+        const c = _useModel(\\"count\\")
+        
+return { modelValue, c }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels({ foo: String }, {
+    \\"modelValue\\": { default: 0 },
+  }),
+  emits: merge(['change'], [\\"update:modelValue\\"]),
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+        
+        const count = _useModel(\\"modelValue\\", { default: 0 })
+        
+return { count }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1567,6 +1609,50 @@ return { emit }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > defineModel > basic usage 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"modelValue\\": [Boolean, String],
+    \\"count\\": Number,
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const count = _useModel(\\"count\\")
+          
+return { modelValue, count }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> > with TypeScript > defineModel > w/ production mode 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"modelValue\\": Boolean,
+    \\"fn\\": Function,
+    \\"str\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const fn = _useModel(\\"fn\\")
+          const str = _useModel(\\"str\\")
+          
+return { modelValue, fn, str }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > defineProps w/ TS assertion 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index f0470e37256..aff709224a3 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -321,6 +321,61 @@ defineExpose({ foo: 123 })
     expect(content).toMatch(/\b__expose\(\{ foo: 123 \}\)/)
   })
 
+  describe('defineModel()', () => {
+    test('basic usage', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        const modelValue = defineModel({ required: true })
+        const c = defineModel('count')
+        </script>
+        `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch('props: {\n    "modelValue": { required: true }')
+      expect(content).toMatch('"count": {},')
+      expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+      expect(content).toMatch(
+        `const modelValue = _useModel("modelValue", { required: true })`
+      )
+      expect(content).toMatch(`const c = _useModel("count")`)
+      expect(content).toMatch(`return { modelValue, c }`)
+      expect(content).not.toMatch('defineModel')
+
+      expect(bindings).toStrictEqual({
+        modelValue: BindingTypes.SETUP_REF,
+        count: BindingTypes.PROPS,
+        c: BindingTypes.SETUP_REF
+      })
+    })
+
+    test('w/ defineProps and defineEmits', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        defineProps({ foo: String })
+        defineEmits(['change'])
+        const count = defineModel({ default: 0 })
+        </script>
+      `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch(`props: _mergeModels({ foo: String }`)
+      expect(content).toMatch(`"modelValue": { default: 0 }`)
+      expect(content).toMatch(
+        `const count = _useModel("modelValue", { default: 0 })`
+      )
+      expect(content).not.toMatch('defineModel')
+      expect(bindings).toStrictEqual({
+        count: BindingTypes.SETUP_REF,
+        foo: BindingTypes.PROPS,
+        modelValue: BindingTypes.PROPS
+      })
+    })
+  })
+
   test('<script> after <script setup> the script content not end with `\\n`', () => {
     const { content } = compile(`
     <script setup>
@@ -1666,6 +1721,58 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
+    describe('defineModel', () => {
+      test('basic usage', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean | string>()
+          const count = defineModel<number>('count')
+          </script>
+          `,
+          { defineModel: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": [Boolean, String]')
+        expect(content).toMatch('"count": Number')
+        expect(content).toMatch('emits: ["update:modelValue", "update:count"]')
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const count = _useModel("count")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          count: BindingTypes.SETUP_REF
+        })
+      })
+
+      test('w/ production mode', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean>()
+          const fn = defineModel<() => void>('fn')
+          const str = defineModel<string>('str')
+          </script>
+          `,
+          { defineModel: true, isProd: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": Boolean')
+        expect(content).toMatch('"fn": Function')
+        expect(content).toMatch('"str": {}')
+        expect(content).toMatch(
+          'emits: ["update:modelValue", "update:fn", "update:str"]'
+        )
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const fn = _useModel("fn")`)
+        expect(content).toMatch(`const str = _useModel("str")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          fn: BindingTypes.SETUP_REF,
+          str: BindingTypes.SETUP_REF
+        })
+      })
+    })
+
     test('runtime Enum', () => {
       const { content, bindings } = compile(
         `<script setup lang="ts">
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 375e62bf6dd..a47f4e12bf6 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -68,6 +68,7 @@ const DEFINE_EXPOSE = 'defineExpose'
 const WITH_DEFAULTS = 'withDefaults'
 const DEFINE_OPTIONS = 'defineOptions'
 const DEFINE_SLOTS = 'defineSlots'
+const DEFINE_MODEL = 'defineModel'
 
 const isBuiltInDir = makeMap(
   `once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`
@@ -119,13 +120,16 @@ export interface SFCScriptCompileOptions {
    * options passed to `compiler-dom`.
    */
   templateOptions?: Partial<SFCTemplateCompileOptions>
-
   /**
    * Hoist <script setup> static constants.
    * - Only enables when one `<script setup>` exists.
    * @default true
    */
   hoistStatic?: boolean
+  /**
+   * (Experimental) Enable macro `defineModel`
+   */
+  defineModel?: boolean
 }
 
 export interface ImportBinding {
@@ -150,10 +154,10 @@ type PropsDeclType = FromNormalScript<TSTypeLiteral | TSInterfaceBody>
 type EmitsDeclType = FromNormalScript<
   TSFunctionType | TSTypeLiteral | TSInterfaceBody
 >
-
-export interface ModelDecl {
-  type: TSType
-  option: Node
+interface ModelDecl {
+  type: TSType | undefined
+  options: string | undefined
+  identifier: string | undefined
 }
 
 /**
@@ -169,6 +173,7 @@ export function compileScript(
   // feature flags
   // TODO remove in 3.4
   const enableReactivityTransform = !!options.reactivityTransform
+  const enableDefineModel = !!options.defineModel
   const isProd = !!options.isProd
   const genSourceMap = options.sourceMap !== false
   const hoistStatic = options.hoistStatic !== false && !script
@@ -319,6 +324,7 @@ export function compileScript(
   let hasDefaultExportRender = false
   let hasDefineOptionsCall = false
   let hasDefineSlotsCall = false
+  let hasDefineModelCall = false
   let propsRuntimeDecl: Node | undefined
   let propsRuntimeDefaults: Node | undefined
   let propsDestructureDecl: Node | undefined
@@ -330,7 +336,7 @@ export function compileScript(
   let emitsTypeDecl: EmitsDeclType | undefined
   let emitIdentifier: string | undefined
   let optionsRuntimeDecl: Node | undefined
-  // let modelDeclMap: Record<string, ModelDecl> = {}
+  let modelDecls: Record<string, ModelDecl> = {}
   let hasAwait = false
   let hasInlinedSsrRenderFn = false
   // props/emits declared via types
@@ -622,6 +628,54 @@ export function compileScript(
     return true
   }
 
+  function processDefineModel(node: Node, declId?: LVal): boolean {
+    if (!enableDefineModel || !isCallOf(node, DEFINE_MODEL)) {
+      return false
+    }
+    hasDefineModelCall = true
+
+    const type =
+      (node.typeParameters && node.typeParameters.params[0]) || undefined
+    let modelName: string
+    let options: Node | undefined
+    const arg0 = node.arguments[0] && unwrapTSNode(node.arguments[0])
+    if (arg0 && arg0.type === 'StringLiteral') {
+      modelName = arg0.value
+      options = node.arguments[1]
+    } else {
+      modelName = 'modelValue'
+      options = arg0
+    }
+
+    if (modelDecls[modelName]) {
+      error(`duplicate model name ${JSON.stringify(modelName)}`, node)
+    }
+
+    modelDecls[modelName] = {
+      type,
+      options: options
+        ? s.slice(startOffset + options.start!, startOffset + options.end!)
+        : undefined,
+      identifier:
+        declId && declId.type === 'Identifier' ? declId.name : undefined
+    }
+
+    s.overwrite(
+      startOffset + node.start!,
+      startOffset + node.end!,
+      `${helper('useModel')}(${JSON.stringify(modelName)}${
+        options
+          ? `, ${s.slice(
+              startOffset + options.start!,
+              startOffset + options.end!
+            )}`
+          : ''
+      })`
+    )
+
+    return true
+  }
+
   function getAstBody(): Statement[] {
     return scriptAst
       ? [...scriptSetupAst.body, ...scriptAst.body]
@@ -888,18 +942,22 @@ export function compileScript(
     )
   }
 
-  function genRuntimeProps(props: Record<string, PropTypeData>) {
-    const keys = Object.keys(props)
-    if (!keys.length) {
-      return ``
-    }
-    const hasStaticDefaults = hasStaticWithDefaults()
-    const scriptSetupSource = scriptSetup!.content
-    let propsDecls = `{
+  function genRuntimeProps() {
+    function genPropsFromTS() {
+      const keys = Object.keys(typeDeclaredProps)
+      if (!keys.length) {
+        return
+      }
+      const hasStaticDefaults = hasStaticWithDefaults()
+      const scriptSetupSource = scriptSetup!.content
+      let propsDecls = `{
     ${keys
       .map(key => {
         let defaultString: string | undefined
-        const destructured = genDestructuredDefaultValue(key, props[key].type)
+        const destructured = genDestructuredDefaultValue(
+          key,
+          typeDeclaredProps[key].type
+        )
         if (destructured) {
           defaultString = `default: ${destructured.valueString}${
             destructured.needSkipFactory ? `, skipFactory: true` : ``
@@ -929,7 +987,7 @@ export function compileScript(
           }
         }
 
-        const { type, required, skipCheck } = props[key]
+        const { type, required, skipCheck } = typeDeclaredProps[key]
         if (!isProd) {
           return `${key}: { type: ${toRuntimeTypeString(
             type
@@ -956,14 +1014,79 @@ export function compileScript(
       })
       .join(',\n    ')}\n  }`
 
-    if (propsRuntimeDefaults && !hasStaticDefaults) {
-      propsDecls = `${helper('mergeDefaults')}(${propsDecls}, ${source.slice(
-        propsRuntimeDefaults.start! + startOffset,
-        propsRuntimeDefaults.end! + startOffset
-      )})`
+      if (propsRuntimeDefaults && !hasStaticDefaults) {
+        propsDecls = `${helper('mergeDefaults')}(${propsDecls}, ${source.slice(
+          propsRuntimeDefaults.start! + startOffset,
+          propsRuntimeDefaults.end! + startOffset
+        )})`
+      }
+
+      return propsDecls
     }
 
-    return `\n  props: ${propsDecls},`
+    function genModels() {
+      if (!hasDefineModelCall) return
+
+      let modelPropsDecl = ''
+      for (const [name, { type, options }] of Object.entries(modelDecls)) {
+        let runtimeTypes = type && inferRuntimeType(type, declaredTypes)
+        if (runtimeTypes && isProd) {
+          runtimeTypes = runtimeTypes.filter(
+            el => el === 'Boolean' || el === 'Function'
+          )
+        }
+        const runtimeType =
+          (runtimeTypes &&
+            runtimeTypes.length > 0 &&
+            toRuntimeTypeString(runtimeTypes)) ||
+          undefined
+
+        let decl: string
+        if (runtimeType && options) {
+          decl = isTS
+            ? `{ type: ${runtimeType}, ...${options} }`
+            : `Object.assign({ type: ${runtimeType} }, ${options})`
+        } else {
+          decl = runtimeType || options || '{}'
+        }
+        modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
+      }
+      return `{${modelPropsDecl}\n  }`
+    }
+
+    let propsDecls: undefined | string
+    if (propsRuntimeDecl) {
+      propsDecls = scriptSetup!.content
+        .slice(propsRuntimeDecl.start!, propsRuntimeDecl.end!)
+        .trim()
+      if (propsDestructureDecl) {
+        const defaults: string[] = []
+        for (const key in propsDestructuredBindings) {
+          const d = genDestructuredDefaultValue(key)
+          if (d)
+            defaults.push(
+              `${key}: ${d.valueString}${
+                d.needSkipFactory ? `, __skip_${key}: true` : ``
+              }`
+            )
+        }
+        if (defaults.length) {
+          propsDecls = `${helper(
+            `mergeDefaults`
+          )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
+        }
+      }
+    } else if (propsTypeDecl) {
+      propsDecls = genPropsFromTS()
+    }
+
+    const modelsDecls = genModels()
+
+    if (propsDecls && modelsDecls) {
+      return `${helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
+    } else {
+      return modelsDecls || propsDecls
+    }
   }
 
   function genDestructuredDefaultValue(
@@ -1327,7 +1450,8 @@ export function compileScript(
         processDefineEmits(expr) ||
         processDefineOptions(expr) ||
         processWithDefaults(expr) ||
-        processDefineSlots(expr)
+        processDefineSlots(expr) ||
+        processDefineModel(expr)
       ) {
         s.remove(node.start! + startOffset, node.end! + startOffset)
       } else if (processDefineExpose(expr)) {
@@ -1363,7 +1487,9 @@ export function compileScript(
             processWithDefaults(init, decl.id)
           const isDefineEmits =
             !isDefineProps && processDefineEmits(init, decl.id)
-          !isDefineEmits && processDefineSlots(init, decl.id)
+          !isDefineEmits &&
+            (processDefineSlots(init, decl.id) ||
+              processDefineModel(init, decl.id))
 
           if (isDefineProps || isDefineEmits) {
             if (left === 1) {
@@ -1556,6 +1682,9 @@ export function compileScript(
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = BindingTypes.PROPS
   }
+  for (const key in modelDecls) {
+    bindingMetadata[key] = BindingTypes.PROPS
+  }
   // props aliases
   if (propsDestructureDecl) {
     if (propsDestructureRestId) {
@@ -1774,38 +1903,27 @@ export function compileScript(
   if (hasInlinedSsrRenderFn) {
     runtimeOptions += `\n  __ssrInlineRender: true,`
   }
-  if (propsRuntimeDecl) {
-    let declCode = scriptSetup.content
-      .slice(propsRuntimeDecl.start!, propsRuntimeDecl.end!)
-      .trim()
-    if (propsDestructureDecl) {
-      const defaults: string[] = []
-      for (const key in propsDestructuredBindings) {
-        const d = genDestructuredDefaultValue(key)
-        if (d)
-          defaults.push(
-            `${key}: ${d.valueString}${
-              d.needSkipFactory ? `, __skip_${key}: true` : ``
-            }`
-          )
-      }
-      if (defaults.length) {
-        declCode = `${helper(
-          `mergeDefaults`
-        )}(${declCode}, {\n  ${defaults.join(',\n  ')}\n})`
-      }
-    }
-    runtimeOptions += `\n  props: ${declCode},`
-  } else if (propsTypeDecl) {
-    runtimeOptions += genRuntimeProps(typeDeclaredProps)
-  }
+
+  let propsDecl = genRuntimeProps()
+  if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
+
+  let emitsDecl = ''
   if (emitsRuntimeDecl) {
-    runtimeOptions += `\n  emits: ${scriptSetup.content
+    emitsDecl = scriptSetup.content
       .slice(emitsRuntimeDecl.start!, emitsRuntimeDecl.end!)
-      .trim()},`
+      .trim()
   } else if (emitsTypeDecl) {
-    runtimeOptions += genRuntimeEmits(typeDeclaredEmits)
+    emitsDecl = genRuntimeEmits(typeDeclaredEmits)
+  }
+  if (hasDefineModelCall) {
+    let modelEmitsDecl = stringifyStringArray(
+      Object.keys(modelDecls).map(n => `update:${n}`)
+    )
+    emitsDecl = emitsDecl
+      ? `merge(${emitsDecl}, ${modelEmitsDecl})`
+      : modelEmitsDecl
   }
+  if (emitsDecl) runtimeOptions += `\n  emits: ${emitsDecl},`
 
   let definedOptions = ''
   if (optionsRuntimeDecl) {
@@ -1940,7 +2058,10 @@ function walkDeclaration(
             ? BindingTypes.SETUP_REACTIVE_CONST
             : BindingTypes.SETUP_CONST
         } else if (isConst) {
-          if (isCallOf(init, userImportAliases['ref'])) {
+          if (
+            isCallOf(init, userImportAliases['ref']) ||
+            isCallOf(init, DEFINE_MODEL)
+          ) {
             bindingType = BindingTypes.SETUP_REF
           } else {
             bindingType = BindingTypes.SETUP_MAYBE_REF
@@ -2371,12 +2492,12 @@ function extractEventNames(
   }
 }
 
+function stringifyStringArray(strs: string[]) {
+  return `[${strs.map(s => JSON.stringify(s)).join(', ')}]`
+}
+
 function genRuntimeEmits(emits: Set<string>) {
-  return emits.size
-    ? `\n  emits: [${Array.from(emits)
-        .map(p => JSON.stringify(p))
-        .join(', ')}],`
-    : ``
+  return emits.size ? stringifyStringArray(Array.from(emits)) : ``
 }
 
 function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index 65fb325f044..f69c3703e93 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -24,7 +24,8 @@ import {
   useSlots,
   mergeDefaults,
   withAsyncContext,
-  createPropsRestProxy
+  createPropsRestProxy,
+  mergeModelsOptions
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -133,6 +134,47 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
+  describe('mergeModelsOptions', () => {
+    test('array syntax', () => {
+      expect(mergeModelsOptions(['foo', 'bar'], ['baz'])).toMatchObject([
+        'foo',
+        'bar',
+        'baz'
+      ])
+    })
+
+    test('object syntax', () => {
+      expect(
+        mergeModelsOptions({ foo: null, bar: { required: true } }, ['baz'])
+      ).toMatchObject({
+        foo: null,
+        bar: { required: true },
+        baz: {}
+      })
+
+      expect(
+        mergeModelsOptions(['baz'], { foo: null, bar: { required: true } })
+      ).toMatchObject({
+        foo: null,
+        bar: { required: true },
+        baz: {}
+      })
+    })
+
+    test('overwrite', () => {
+      expect(
+        mergeModelsOptions(
+          { foo: null, bar: { required: true } },
+          { bar: {}, baz: {} }
+        )
+      ).toMatchObject({
+        foo: null,
+        bar: {},
+        baz: {}
+      })
+    })
+  })
+
   test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index df2defa01c9..6309f9400ef 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -12,7 +12,7 @@ import {
   createSetupContext,
   unsetCurrentInstance
 } from './component'
-import { EmitFn, EmitsOptions } from './componentEmits'
+import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 import {
   ComponentOptionsMixin,
   ComponentOptionsWithoutProps,
@@ -26,7 +26,8 @@ import {
 } from './componentProps'
 import { warn } from './warning'
 import { SlotsType, TypedSlots } from './componentSlots'
-import { WritableComputedRef } from '@vue/reactivity'
+import { WritableComputedRef, computed, ref } from '@vue/reactivity'
+import { watch } from './apiWatch'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
@@ -233,11 +234,10 @@ export function defineModel<T>(
   name: string,
   options?: Record<string, unknown>
 ): WritableComputedRef<T | undefined>
-export function defineModel() {
+export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
   }
-  return null as any
 }
 
 type NotUndefined<T> = T extends undefined ? never : T
@@ -301,6 +301,51 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
+export function useModel<T>(
+  name: string,
+  options: {
+    passive?: boolean
+    deep?: boolean
+  } = {}
+): WritableComputedRef<T> {
+  const { passive, deep } = options
+  const i = getCurrentInstance()!
+  if (__DEV__ && !i) {
+    warn(`useModel() called without active instance.`)
+    return null as any
+  }
+
+  if (passive) {
+    const proxy = ref<any>(i.props[name])
+
+    watch(
+      () => i.props[name],
+      v => (proxy.value = v)
+    )
+
+    watch(
+      proxy,
+      value => {
+        if (value !== i.props[name] || deep) {
+          i.emit(`update:${name}`, value)
+        }
+      },
+      { deep }
+    )
+
+    return proxy
+  } else {
+    return computed<any>({
+      get() {
+        return i.props[name]
+      },
+      set(value) {
+        i.emit(`update:${name}`, value)
+      }
+    })
+  }
+}
+
 function getContext(): SetupContext {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
@@ -309,6 +354,15 @@ function getContext(): SetupContext {
   return i.setupContext || (i.setupContext = createSetupContext(i))
 }
 
+function normalizePropsOrEmits(props: ComponentPropsOptions | EmitsOptions) {
+  return isArray(props)
+    ? props.reduce(
+        (normalized, p) => ((normalized[p] = {}), normalized),
+        {} as ComponentObjectPropsOptions | ObjectEmitsOptions
+      )
+    : props
+}
+
 /**
  * Runtime helper for merging default declarations. Imported by compiled code
  * only.
@@ -318,12 +372,7 @@ export function mergeDefaults(
   raw: ComponentPropsOptions,
   defaults: Record<string, any>
 ): ComponentObjectPropsOptions {
-  const props = isArray(raw)
-    ? raw.reduce(
-        (normalized, p) => ((normalized[p] = {}), normalized),
-        {} as ComponentObjectPropsOptions
-      )
-    : raw
+  const props = normalizePropsOrEmits(raw)
   for (const key in defaults) {
     if (key.startsWith('__skip')) continue
     let opt = props[key]
@@ -345,6 +394,20 @@ export function mergeDefaults(
   return props
 }
 
+/**
+ * Runtime helper for merging model declarations. Imported by compiled code
+ * only.
+ * @internal
+ */
+export function mergeModelsOptions(
+  a: ComponentPropsOptions | EmitsOptions,
+  b: ComponentPropsOptions | EmitsOptions
+) {
+  if (!a || !b) return a || b
+  if (isArray(a) && isArray(b)) return a.concat(b)
+  return Object.assign({}, normalizePropsOrEmits(a), normalizePropsOrEmits(b))
+}
+
 /**
  * Used to create a proxy for the rest element when destructuring props with
  * defineProps().
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 34f2eb910e5..c54f0fac99e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -75,6 +75,7 @@ export {
   withDefaults,
   // internal
   mergeDefaults,
+  mergeModelsOptions,
   createPropsRestProxy,
   withAsyncContext
 } from './apiSetupHelpers'
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index ef6481cb98b..1bba8d6f2ae 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -37,7 +37,8 @@ const sfcOptions = {
   script: {
     inlineTemplate: !useDevMode.value,
     isProd: !useDevMode.value,
-    reactivityTransform: true
+    reactivityTransform: true,
+    defineModel: true
   },
   style: {
     isProd: !useDevMode.value