diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 31fe534ca78..9e58d751da9 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -60,12 +60,13 @@ type CodegenNode = TemplateChildNode | JSChildNode | SSRCodegenNode
 
 export interface CodegenResult {
   code: string
+  preamble: string
   ast: RootNode
   map?: RawSourceMap
 }
 
 export interface CodegenContext
-  extends Omit<Required<CodegenOptions>, 'bindingMetadata'> {
+  extends Omit<Required<CodegenOptions>, 'bindingMetadata' | 'inline'> {
   source: string
   code: string
   line: number
@@ -199,12 +200,18 @@ export function generate(
   const hasHelpers = ast.helpers.length > 0
   const useWithBlock = !prefixIdentifiers && mode !== 'module'
   const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
+  const isSetupInlined = !!options.inline
 
   // preambles
+  // in setup() inline mode, the preamble is generated in a sub context
+  // and returned separately.
+  const preambleContext = isSetupInlined
+    ? createCodegenContext(ast, options)
+    : context
   if (!__BROWSER__ && mode === 'module') {
-    genModulePreamble(ast, context, genScopeId)
+    genModulePreamble(ast, preambleContext, genScopeId, isSetupInlined)
   } else {
-    genFunctionPreamble(ast, context)
+    genFunctionPreamble(ast, preambleContext)
   }
 
   // binding optimizations
@@ -213,10 +220,17 @@ export function generate(
     : ``
   // enter render function
   if (!ssr) {
-    if (genScopeId) {
-      push(`const render = ${PURE_ANNOTATION}_withId(`)
+    if (isSetupInlined) {
+      if (genScopeId) {
+        push(`${PURE_ANNOTATION}_withId(`)
+      }
+      push(`(_ctx, _cache${optimizeSources}) => {`)
+    } else {
+      if (genScopeId) {
+        push(`const render = ${PURE_ANNOTATION}_withId(`)
+      }
+      push(`function render(_ctx, _cache${optimizeSources}) {`)
     }
-    push(`function render(_ctx, _cache${optimizeSources}) {`)
   } else {
     if (genScopeId) {
       push(`const ssrRender = ${PURE_ANNOTATION}_withId(`)
@@ -290,6 +304,7 @@ export function generate(
   return {
     ast,
     code: context.code,
+    preamble: isSetupInlined ? preambleContext.code : ``,
     // SourceMapGenerator does have toJSON() method but it's not in the types
     map: context.map ? (context.map as any).toJSON() : undefined
   }
@@ -356,7 +371,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
 function genModulePreamble(
   ast: RootNode,
   context: CodegenContext,
-  genScopeId: boolean
+  genScopeId: boolean,
+  inline?: boolean
 ) {
   const {
     push,
@@ -423,7 +439,10 @@ function genModulePreamble(
 
   genHoists(ast.hoists, context)
   newline()
-  push(`export `)
+
+  if (!inline) {
+    push(`export `)
+  }
 }
 
 function genAssets(
diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 7cc6219c1cb..03388b1f7a8 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -7,7 +7,8 @@ export {
   TransformOptions,
   CodegenOptions,
   HoistTransform,
-  BindingMetadata
+  BindingMetadata,
+  BindingTypes
 } from './options'
 export { baseParse, TextModes } from './parse'
 export {
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 22d8a086b2f..2a6b79c1642 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -61,11 +61,47 @@ export type HoistTransform = (
   parent: ParentNode
 ) => void
 
+export const enum BindingTypes {
+  DATA = 'data',
+  PROPS = 'props',
+  SETUP = 'setup',
+  CONST = 'const',
+  OPTIONS = 'options'
+}
+
 export interface BindingMetadata {
-  [key: string]: 'data' | 'props' | 'setup' | 'options'
+  [key: string]: BindingTypes
+}
+
+interface SharedTransformCodegenOptions {
+  /**
+   * Transform expressions like {{ foo }} to `_ctx.foo`.
+   * If this option is false, the generated code will be wrapped in a
+   * `with (this) { ... }` block.
+   * - This is force-enabled in module mode, since modules are by default strict
+   * and cannot use `with`
+   * @default mode === 'module'
+   */
+  prefixIdentifiers?: boolean
+  /**
+   * Generate SSR-optimized render functions instead.
+   * The resulting function must be attached to the component via the
+   * `ssrRender` option instead of `render`.
+   */
+  ssr?: boolean
+  /**
+   * Optional binding metadata analyzed from script - used to optimize
+   * binding access when `prefixIdentifiers` is enabled.
+   */
+  bindingMetadata?: BindingMetadata
+  /**
+   * Compile the function for inlining inside setup().
+   * This allows the function to directly access setup() local bindings.
+   */
+  inline?: boolean
 }
 
-export interface TransformOptions {
+export interface TransformOptions extends SharedTransformCodegenOptions {
   /**
    * An array of node transforms to be applied to every AST node.
    */
@@ -128,26 +164,15 @@ export interface TransformOptions {
    * SFC scoped styles ID
    */
   scopeId?: string | null
-  /**
-   * Generate SSR-optimized render functions instead.
-   * The resulting function must be attached to the component via the
-   * `ssrRender` option instead of `render`.
-   */
-  ssr?: boolean
   /**
    * SFC `<style vars>` injection string
    * needed to render inline CSS variables on component root
    */
   ssrCssVars?: string
-  /**
-   * Optional binding metadata analyzed from script - used to optimize
-   * binding access when `prefixIdentifiers` is enabled.
-   */
-  bindingMetadata?: BindingMetadata
   onError?: (error: CompilerError) => void
 }
 
-export interface CodegenOptions {
+export interface CodegenOptions extends SharedTransformCodegenOptions {
   /**
    * - `module` mode will generate ES module import statements for helpers
    * and export the render function as the default export.
@@ -189,11 +214,6 @@ export interface CodegenOptions {
    * @default 'Vue'
    */
   runtimeGlobalName?: string
-  // we need to know this during codegen to generate proper preambles
-  prefixIdentifiers?: boolean
-  bindingMetadata?: BindingMetadata
-  // generate ssr-specific code?
-  ssr?: boolean
 }
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index dea6f460b19..1cf8c7bfc12 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -29,6 +29,7 @@ export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
 export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``)
 export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
+export const UNREF = Symbol(__DEV__ ? `unref` : ``)
 
 // Name mapping for runtime helpers that need to be imported from 'vue' in
 // generated code. Make sure these are correctly exported in the runtime!
@@ -62,7 +63,8 @@ export const helperNameMap: any = {
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,
   [WITH_SCOPE_ID]: `withScopeId`,
-  [WITH_CTX]: `withCtx`
+  [WITH_CTX]: `withCtx`,
+  [UNREF]: `unref`
 }
 
 export function registerRuntimeHelpers(helpers: any) {
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4650c368557..c3a37c9f715 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -22,7 +22,8 @@ import {
   isArray,
   NOOP,
   PatchFlags,
-  PatchFlagNames
+  PatchFlagNames,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { defaultOnError } from './errors'
 import {
@@ -122,7 +123,8 @@ export function createTransformContext(
     scopeId = null,
     ssr = false,
     ssrCssVars = ``,
-    bindingMetadata = {},
+    bindingMetadata = EMPTY_OBJ,
+    inline = false,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {
@@ -141,6 +143,7 @@ export function createTransformContext(
     ssr,
     ssrCssVars,
     bindingMetadata,
+    inline,
     onError,
 
     // state
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 240f9bacf4f..a4131c6d6f6 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -207,11 +207,11 @@ export function getStaticType(
     case NodeTypes.TEXT_CALL:
       return getStaticType(node.content, resultCache)
     case NodeTypes.SIMPLE_EXPRESSION:
-      return node.isConstant
-        ? node.isRuntimeConstant
-          ? StaticType.HAS_RUNTIME_CONSTANT
-          : StaticType.FULL_STATIC
-        : StaticType.NOT_STATIC
+      return node.isRuntimeConstant
+        ? StaticType.HAS_RUNTIME_CONSTANT
+        : node.isConstant
+          ? StaticType.FULL_STATIC
+          : StaticType.NOT_STATIC
     case NodeTypes.COMPOUND_EXPRESSION:
       let returnType = StaticType.FULL_STATIC
       for (let i = 0; i < node.children.length; i++) {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 8a6d39a376a..905eded29cd 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -26,7 +26,10 @@ import {
   isSymbol,
   isOn,
   isObject,
-  isReservedProp
+  isReservedProp,
+  capitalize,
+  camelize,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -37,7 +40,8 @@ import {
   TO_HANDLERS,
   TELEPORT,
   KEEP_ALIVE,
-  SUSPENSE
+  SUSPENSE,
+  UNREF
 } from '../runtimeHelpers'
 import {
   getInnerRange,
@@ -50,6 +54,7 @@ import {
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getStaticType } from './hoistStatic'
+import { BindingTypes } from '../options'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
 // import, which should be used instead of a resolveDirective call.
@@ -246,8 +251,32 @@ export function resolveComponentType(
   }
 
   // 3. user component (from setup bindings)
-  if (context.bindingMetadata[tag] === 'setup') {
-    return `$setup[${JSON.stringify(tag)}]`
+  const bindings = context.bindingMetadata
+  if (bindings !== EMPTY_OBJ) {
+    const checkType = (type: BindingTypes) => {
+      let resolvedTag = tag
+      if (
+        bindings[resolvedTag] === type ||
+        bindings[(resolvedTag = camelize(tag))] === type ||
+        bindings[(resolvedTag = capitalize(camelize(tag)))] === type
+      ) {
+        return resolvedTag
+      }
+    }
+    const tagFromSetup = checkType(BindingTypes.SETUP)
+    if (tagFromSetup) {
+      return context.inline
+        ? // setup scope bindings may be refs so they need to be unrefed
+          `${context.helperString(UNREF)}(${tagFromSetup})`
+        : `$setup[${JSON.stringify(tagFromSetup)}]`
+    }
+    const tagFromConst = checkType(BindingTypes.CONST)
+    if (tagFromConst) {
+      return context.inline
+        ? // in inline mode, const setup bindings (e.g. imports) can be used as-is
+          tagFromConst
+        : `$setup[${JSON.stringify(tagFromConst)}]`
+    }
   }
 
   // 4. user component (resolve)
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index a671c563f70..f72bd16bb34 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -28,6 +28,8 @@ import { Node, Function, Identifier, ObjectProperty } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
 import { parse } from '@babel/parser'
 import { walk } from 'estree-walker'
+import { UNREF } from '../runtimeHelpers'
+import { BindingTypes } from '../options'
 
 const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this')
 
@@ -97,12 +99,31 @@ export function processExpression(
     return node
   }
 
-  const { bindingMetadata } = context
+  const { inline, bindingMetadata } = context
   const prefix = (raw: string) => {
-    const source = hasOwn(bindingMetadata, raw)
-      ? `$` + bindingMetadata[raw]
-      : `_ctx`
-    return `${source}.${raw}`
+    const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
+    if (inline) {
+      // setup inline mode
+      if (type === BindingTypes.CONST) {
+        return raw
+      } else if (type === BindingTypes.SETUP) {
+        return `${context.helperString(UNREF)}(${raw})`
+      } else if (type === BindingTypes.PROPS) {
+        // use __props which is generated by compileScript so in ts mode
+        // it gets correct type
+        return `__props.${raw}`
+      }
+    }
+
+    if (type === BindingTypes.CONST) {
+      // setup const binding in non-inline mode
+      return `$setup.${raw}`
+    } else if (type) {
+      return `$${type}.${raw}`
+    } else {
+      // fallback to ctx
+      return `_ctx.${raw}`
+    }
   }
 
   // fast path if expression is a simple identifier.
@@ -110,6 +131,10 @@ export function processExpression(
   // bail on parens to prevent any possible function invocations.
   const bailConstant = rawExp.indexOf(`(`) > -1
   if (isSimpleIdentifier(rawExp)) {
+    // const bindings exposed from setup - we know they never change
+    if (bindingMetadata[node.content] === BindingTypes.CONST) {
+      node.isRuntimeConstant = true
+    }
     if (
       !asParams &&
       !context.identifiers[rawExp] &&
@@ -161,9 +186,9 @@ export function processExpression(
         if (!isDuplicate(node)) {
           const needPrefix = shouldPrefix(node, parent)
           if (!knownIds[node.name] && needPrefix) {
-            if (isPropertyShorthand(node, parent)) {
-              // property shorthand like { foo }, we need to add the key since we
-              // rewrite the value
+            if (isStaticProperty(parent) && parent.shorthand) {
+              // property shorthand like { foo }, we need to add the key since
+              // we rewrite the value
               node.prefix = `${node.name}: `
             }
             node.name = prefix(node.name)
@@ -278,46 +303,65 @@ const isStaticProperty = (node: Node): node is ObjectProperty =>
   (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
   !node.computed
 
-const isPropertyShorthand = (node: Node, parent: Node) => {
-  return (
-    isStaticProperty(parent) &&
-    parent.value === node &&
-    parent.key.type === 'Identifier' &&
-    parent.key.name === (node as Identifier).name &&
-    parent.key.start === node.start
-  )
-}
-
 const isStaticPropertyKey = (node: Node, parent: Node) =>
   isStaticProperty(parent) && parent.key === node
 
-function shouldPrefix(identifier: Identifier, parent: Node) {
+function shouldPrefix(id: Identifier, parent: Node) {
+  // declaration id
+  if (
+    (parent.type === 'VariableDeclarator' ||
+      parent.type === 'ClassDeclaration') &&
+    parent.id === id
+  ) {
+    return false
+  }
+
+  if (isFunction(parent)) {
+    // function decalration/expression id
+    if ((parent as any).id === id) {
+      return false
+    }
+    // params list
+    if (parent.params.includes(id)) {
+      return false
+    }
+  }
+
+  // property key
+  // this also covers object destructure pattern
+  if (isStaticPropertyKey(id, parent)) {
+    return false
+  }
+
+  // array destructure pattern
+  if (parent.type === 'ArrayPattern') {
+    return false
+  }
+
+  // member expression property
   if (
-    !(
-      isFunction(parent) &&
-      // not id of a FunctionDeclaration
-      ((parent as any).id === identifier ||
-        // not a params of a function
-        parent.params.includes(identifier))
-    ) &&
-    // not a key of Property
-    !isStaticPropertyKey(identifier, parent) &&
-    // not a property of a MemberExpression
-    !(
-      (parent.type === 'MemberExpression' ||
-        parent.type === 'OptionalMemberExpression') &&
-      parent.property === identifier &&
-      !parent.computed
-    ) &&
-    // not in an Array destructure pattern
-    !(parent.type === 'ArrayPattern') &&
-    // skip whitelisted globals
-    !isGloballyWhitelisted(identifier.name) &&
-    // special case for webpack compilation
-    identifier.name !== `require` &&
-    // is a special keyword but parsed as identifier
-    identifier.name !== `arguments`
+    (parent.type === 'MemberExpression' ||
+      parent.type === 'OptionalMemberExpression') &&
+    parent.property === id &&
+    !parent.computed
   ) {
-    return true
+    return false
   }
+
+  // is a special keyword but parsed as identifier
+  if (id.name === 'arguments') {
+    return false
+  }
+
+  // skip whitelisted globals
+  if (isGloballyWhitelisted(id.name)) {
+    return false
+  }
+
+  // special case for webpack compilation
+  if (id.name === 'require') {
+    return false
+  }
+
+  return true
 }
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 441e6fd1674..546f669e2ae 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -70,7 +70,7 @@ export const transformOn: DirectiveTransform = (
   if (exp && !exp.content.trim()) {
     exp = undefined
   }
-  let isCacheable: boolean = context.cacheHandlers && !exp
+  let shouldCache: boolean = context.cacheHandlers && !exp
   if (exp) {
     const isMemberExp = isMemberExpression(exp.content)
     const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content))
@@ -83,8 +83,11 @@ export const transformOn: DirectiveTransform = (
       isInlineStatement && context.removeIdentifiers(`$event`)
       // with scope analysis, the function is hoistable if it has no reference
       // to scope variables.
-      isCacheable =
+      shouldCache =
         context.cacheHandlers &&
+        // runtime constants don't need to be cached
+        // (this is analyzed by compileScript in SFC <script setup>)
+        !(exp.type === NodeTypes.SIMPLE_EXPRESSION && exp.isRuntimeConstant) &&
         // #1541 bail if this is a member exp handler passed to a component -
         // we need to use the original function to preserve arity,
         // e.g. <transition> relies on checking cb.length to determine
@@ -98,7 +101,7 @@ export const transformOn: DirectiveTransform = (
       // to a function, turn it into invocation (and wrap in an arrow function
       // below) so that it always accesses the latest value when called - thus
       // avoiding the need to be patched.
-      if (isCacheable && isMemberExp) {
+      if (shouldCache && isMemberExp) {
         if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
           exp.content += `(...args)`
         } else {
@@ -116,7 +119,7 @@ export const transformOn: DirectiveTransform = (
       )
     }
 
-    if (isInlineStatement || (isCacheable && isMemberExp)) {
+    if (isInlineStatement || (shouldCache && isMemberExp)) {
       // wrap inline statement in a function expression
       exp = createCompoundExpression([
         `${isInlineStatement ? `$event` : `(...args)`} => ${
@@ -142,7 +145,7 @@ export const transformOn: DirectiveTransform = (
     ret = augmentor(ret)
   }
 
-  if (isCacheable) {
+  if (shouldCache) {
     // cache handlers so that it's always the same handler being passed down.
     // this avoids unnecessary re-renders when users use inline handlers on
     // components.
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index a6bb93e7405..baac4d5815d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1,115 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SFC compile <script setup> <script setup lang="ts"> extract emits 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
-declare function __emit__(e: 'foo' | 'bar'): void
-      declare function __emit__(e: 'baz', id: number): void
-      
-export function setup(_: {}, { emit: myEmit }: {
-  emit: typeof __emit__,
-  slots: __Slots__,
-  attrs: Record<string, any>
-}) {
-
-      
-return {  }
-}
-
-export default __define__({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
-  setup
-})"
-`;
-
-exports[`SFC compile <script setup> <script setup lang="ts"> extract props 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
-interface Test {}
-
-      type Alias = number[]
-
-      
-export function setup(myProps: {
-        string: string
-        number: number
-        boolean: boolean
-        object: object
-        objectLiteral: { a: number }
-        fn: (n: number) => void
-        functionRef: Function
-        objectRef: Object
-        array: string[]
-        arrayRef: Array<any>
-        tuple: [number, number]
-        set: Set<string>
-        literal: 'foo'
-        optional?: any
-        recordRef: Record<string, null>
-        interface: Test
-        alias: Alias
-
-        union: string | number
-        literalUnion: 'foo' | 'bar'
-        literalUnionMixed: 'foo' | 1 | boolean
-        intersection: Test & {}
-      }) {
-
-      
-return {  }
-}
-
-export default __define__({
-  props: {
-    string: { type: String, required: true },
-    number: { type: Number, required: true },
-    boolean: { type: Boolean, required: true },
-    object: { type: Object, required: true },
-    objectLiteral: { type: Object, required: true },
-    fn: { type: Function, required: true },
-    functionRef: { type: Function, required: true },
-    objectRef: { type: Object, required: true },
-    array: { type: Array, required: true },
-    arrayRef: { type: Array, required: true },
-    tuple: { type: Array, required: true },
-    set: { type: Set, required: true },
-    literal: { type: String, required: true },
-    optional: { type: null, required: false },
-    recordRef: { type: Object, required: true },
-    interface: { type: Object, required: true },
-    alias: { type: Array, required: true },
-    union: { type: [String, Number], required: true },
-    literalUnion: { type: [String, String], required: true },
-    literalUnionMixed: { type: [String, Number, Boolean], required: true },
-    intersection: { type: Object, required: true }
-  } as unknown as undefined,
-  setup
-})"
-`;
-
-exports[`SFC compile <script setup> <script setup lang="ts"> hoist type declarations 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
-export interface Foo {}
-        type Bar = {}
-        
-export function setup() {
-
-        const a = 1
-      
-return { a }
-}
-
-export default __define__({
-  setup
-})"
-`;
-
 exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
 "const __default__ = { setup() {} }
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -123,9 +18,9 @@ exports[`SFC compile <script setup> CSS vars injection <script> w/ default expor
           // export default {}
           const __default__ = {}
         
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -137,9 +32,9 @@ export default __default__"
 exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
 "const a = 1
 const __default__ = {}
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -149,255 +44,493 @@ export default __default__"
 `;
 
 exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
-"import { useCssVars as __useCssVars__ } from 'vue'
+"import { useCssVars as _useCssVars } from 'vue'
 
-export function setup() {
+export default {
+  expose: [],
+  setup() {
 const color = 'red'
-__useCssVars__(_ctx => ({ color }))
+_useCssVars(_ctx => ({ color }))
 return { color }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> errors should allow export default referencing imported binding 1`] = `
-"import { bar } from './bar'
-          
-export function setup() {
+exports[`SFC compile <script setup> defineOptions() 1`] = `
+"export default {
+  expose: [],
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],
+  setup(__props, { props, emit }) {
 
-          
-return { bar }
+
+
+const bar = 1
+
+return { props, emit, bar }
 }
 
-const __default__ = {
-            props: {
-              foo: {
-                default: () => bar
-              }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> errors should allow export default referencing re-exported binding 1`] = `
+exports[`SFC compile <script setup> errors should allow defineOptions() referencing imported binding 1`] = `
 "import { bar } from './bar'
           
-export function setup() {
+export default {
+  expose: [],
+  props: {
+              foo: {
+                default: () => bar
+              }
+            },
+  setup() {
 
           
+        
 return { bar }
 }
 
-const __default__ = {
-            props: {
-              foo: {
-                default: () => bar
-              }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> errors should allow export default referencing scope var 1`] = `
-"export function setup() {
+exports[`SFC compile <script setup> errors should allow defineOptions() referencing scope var 1`] = `
+"export default {
+  expose: [],
+  props: {
+              foo: {
+                default: bar => bar + 1
+              }
+            },
+  setup() {
 
           const bar = 1
           
-return {  }
+        
+return { bar }
 }
 
-const __default__ = {
-            props: {
-              foo: {
-                default: bar => bar + 1
-              }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> explicit setup signature 1`] = `
-"export function setup(props, { emit }) {
-emit('foo')
-return {  }
+exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
+"import { ref as _ref } from 'vue'
+import { ref } from 'vue'
+      
+export default {
+  expose: [],
+  setup() {
+
+      const foo = _ref(1)
+      
+return { foo, ref }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export * from './x' 1`] = `
-"import { toRefs as __toRefs__ } from 'vue'
-import * as __export_all_0__ from './x'
-          
-export function setup() {
+exports[`SFC compile <script setup> imports import dedupe between <script> and <script setup> 1`] = `
+"import { x } from './x'
+        
+export default {
+  expose: [],
+  setup() {
 
-          const y = 1
-          
-return Object.assign(
-  { y },
-  __toRefs__(__export_all_0__)
-)
+        x()
+        
+return { x }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export { x } 1`] = `
-"export function setup() {
+exports[`SFC compile <script setup> imports should extract comment for import or type declarations 1`] = `
+"import a from 'a' // comment
+        import b from 'b'
+        
+export default {
+  expose: [],
+  setup() {
 
-           const x = 1
-           const y = 2
-           
-return { x, y }
+        
+return { a, b }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export { x } from './x' 1`] = `
-"import { x, y } from './x'
-          
-export function setup() {
+exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
+"import { ref } from 'vue'
+export default {
+  expose: [],
+  setup() {
 
-           
-return { x, y }
+return { ref }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export { x as default } 1`] = `
-"import x from './x'
-          
-export function setup() {
+exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
+"import { createVNode as _createVNode, unref as _unref, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 
-          const y = 1
-          
-return { y }
+import { ref } from 'vue'
+        import Foo from './Foo.vue'
+        import other from './util'
+        
+export default {
+  expose: [],
+  setup() {
+
+        const count = ref(0)
+        const constant = {}
+        function fn() {}
+        
+return (_ctx, _cache, $props, $setup, $data, $options) => {
+  return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(Foo),
+    _createVNode(\\"div\\", { onClick: fn }, _toDisplayString(_unref(count)) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
+  ], 64 /* STABLE_FRAGMENT */))
 }
+}
+
+}"
+`;
 
+exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 
-const __default__ = x
-__default__.setup = setup
-export default __default__"
+const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
+
+import { ref } from 'vue'
+        
+export default {
+  expose: [],
+  setup() {
+
+        const count = ref(0)
+        
+return (_ctx, _cache, $props, $setup, $data, $options) => {
+  return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(\\"div\\", null, _toDisplayString(_unref(count)), 1 /* TEXT */),
+    _hoisted_1
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
 `;
 
-exports[`SFC compile <script setup> exports export { x as default } from './x' 1`] = `
-"import { x as __default__ } from './x'
-import { y } from './x'
-          
-export function setup() {
+exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
+"import { ref as _ref } from 'vue'
 
-          
-return { y }
+export default {
+  expose: [],
+  setup() {
+
+      const a = _ref(1)
+      console.log(a.value)
+      function get() {
+        return a.value + 1
+      }
+      
+return { a, get }
 }
 
-__default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export class X() {} 1`] = `
-"export function setup() {
-class X {}
-return { X }
+exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  expose: [],
+  setup() {
+
+      const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
+const a = _ref(__a);
+const b = _ref(__b);
+const c = _ref(__c);
+      console.log(n.value, a.value, b.value, c.value)
+      
+return { n, a, b, c }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export const { x } = ... (destructuring) 1`] = `
-"export function setup() {
+exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = `
+"import { ref as _ref } from 'vue'
 
-          const [a = 1, { b } = { b: 123 }, ...c] = useFoo()
-          const { d = 2, _: [e], ...f } = useBar()
-        
-return { a, b, c, d, e, f }
+export default {
+  expose: [],
+  setup() {
+
+      const foo = _ref()
+      const a = _ref(1)
+      const b = _ref({
+        count: 0
+      })
+      let c = () => {}
+      let d
+      
+return { foo, a, b, c, d }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export const x = ... 1`] = `
-"export function setup() {
-const x = 1
-return { x }
+exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  expose: [],
+  setup() {
+
+      const a = _ref(1), b = _ref(2), c = _ref({
+        count: 0
+      })
+      
+return { a, b, c }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export default from './x' 1`] = `
-"import __default__ from './x'
-          
-export function setup() {
+exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  expose: [],
+  setup() {
+
+      const a = _ref(1)
+      const b = _ref({ count: 0 })
+      function inc() {
+        a.value++
+        a.value = a.value + 1
+        b.value.count++
+        b.value.count = b.value.count + 1
+      }
+      
+return { a, b, inc }
+}
 
-          
-return {  }
+}"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  expose: [],
+  setup() {
+
+      const [{ a: { b: __b }}] = useFoo()
+const b = _ref(__b);
+      const { c: [__d, __e] } = useBar()
+const d = _ref(__d);
+const e = _ref(__e);
+      console.log(b.value, d.value, e.value)
+      
+return { b, d, e }
 }
 
-__default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export default in <script setup> 1`] = `
-"export function setup() {
+exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
+"import { ref as _ref } from 'vue'
 
-          const y = 1
-          
-return { y }
+export default {
+  expose: [],
+  setup() {
+
+      const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
+const a = _ref(__a);
+const c = _ref(__c);
+const d = _ref(__d);
+const f = _ref(__f);
+const g = _ref(__g);
+      console.log(n.value, a.value, c.value, d.value, f.value, g.value)
+      
+return { n, a, c, d, f, g }
 }
 
-const __default__ = {
-            props: ['foo']
-          }
-          __default__.setup = setup
-export default __default__"
+}"
 `;
 
-exports[`SFC compile <script setup> exports export function x() {} 1`] = `
-"export function setup() {
-function x(){}
-return { x }
+exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
+"export default {
+  expose: [],
+  setup() {
+
+      foo: a = 1, b = 2, c = {
+        count: 0
+      }
+      
+return {  }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> import dedupe between <script> and <script setup> 1`] = `
+exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  expose: [],
+  setup() {
+
+      const a = _ref(1)
+      const b = { a: a.value }
+      function test() {
+        const { a } = b
+      }
+      
+return { a, b, test }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> should expose top level declarations 1`] = `
 "import { x } from './x'
       
-export function setup() {
+export default {
+  expose: [],
+  setup() {
+
+      let a = 1
+      const b = 2
+      function c() {}
+      class d {}
+      
+return { a, b, c, d, x }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ runtime options 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+
+export default _defineComponent({
+  expose: [],
+  props: { foo: String },
+  emits: ['a', 'b'],
+  setup(__props, { props, emit }) {
+
+
+
+return { props, emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits (union) 1`] = `
+"import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
+
+      
+export default _defineComponent({
+  expose: [],
+  emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
+  setup(__props, { emit }: {
+  props: {},
+  emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void),
+  slots: Slots,
+  attrs: Record<string, any>
+}) {
 
-      x()
       
-return {  }
+      
+return { emit }
 }
 
-export default { setup }"
+})"
 `;
 
-exports[`SFC compile <script setup> should extract comment for import or type declarations 1`] = `
-"import a from 'a' // comment
-import b from 'b'
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits 1`] = `
+"import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
 
-export function setup() {
+      
+export default _defineComponent({
+  expose: [],
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { emit }: {
+  props: {},
+  emit: (e: 'foo' | 'bar') => void,
+  slots: Slots,
+  attrs: Record<string, any>
+}) {
 
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract props 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+      interface Test {}
+
+      type Alias = number[]
+
+      
+export default _defineComponent({
+  expose: [],
+  props: {
+    string: { type: String, required: true },
+    number: { type: Number, required: true },
+    boolean: { type: Boolean, required: true },
+    object: { type: Object, required: true },
+    objectLiteral: { type: Object, required: true },
+    fn: { type: Function, required: true },
+    functionRef: { type: Function, required: true },
+    objectRef: { type: Object, required: true },
+    array: { type: Array, required: true },
+    arrayRef: { type: Array, required: true },
+    tuple: { type: Array, required: true },
+    set: { type: Set, required: true },
+    literal: { type: String, required: true },
+    optional: { type: null, required: false },
+    recordRef: { type: Object, required: true },
+    interface: { type: Object, required: true },
+    alias: { type: Array, required: true },
+    union: { type: [String, Number], required: true },
+    literalUnion: { type: [String, String], required: true },
+    literalUnionMixed: { type: [String, Number, Boolean], required: true },
+    intersection: { type: Object, required: true }
+  } as unknown as undefined,
+  setup() {
 
+      
+      
 return {  }
 }
 
-export default { setup }"
+})"
 `;
 
-exports[`SFC compile <script setup> should hoist imports 1`] = `
-"import { ref } from 'vue'
-export function setup() {
+exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+export interface Foo {}
+        type Bar = {}
+      
+export default _defineComponent({
+  expose: [],
+  setup() {
 
+        
 return {  }
 }
 
-export default { setup }"
+})"
 `;
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 38a385acfcd..5a8e24c4ea3 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -22,232 +22,220 @@ function assertCode(code: string) {
 }
 
 describe('SFC compile <script setup>', () => {
-  test('should hoist imports', () => {
-    assertCode(
-      compile(`<script setup>import { ref } from 'vue'</script>`).content
-    )
-  })
-
-  test('should extract comment for import or type declarations', () => {
-    assertCode(
-      compile(`<script setup>
-import a from 'a' // comment
-import b from 'b'
-</script>`).content
-    )
-  })
-
-  test('explicit setup signature', () => {
-    assertCode(
-      compile(`<script setup="props, { emit }">emit('foo')</script>`).content
-    )
-  })
-
-  test('import dedupe between <script> and <script setup>', () => {
+  test('should expose top level declarations', () => {
     const { content } = compile(`
-      <script>
-      import { x } from './x'
-      </script>
       <script setup>
       import { x } from './x'
-      x()
+      let a = 1
+      const b = 2
+      function c() {}
+      class d {}
       </script>
       `)
     assertCode(content)
-    expect(content.indexOf(`import { x }`)).toEqual(
-      content.lastIndexOf(`import { x }`)
-    )
+    expect(content).toMatch('return { a, b, c, d, x }')
   })
 
-  describe('exports', () => {
-    test('export const x = ...', () => {
-      const { content, bindings } = compile(
-        `<script setup>export const x = 1</script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup'
-      })
-    })
-
-    test('export const { x } = ... (destructuring)', () => {
-      const { content, bindings } = compile(`<script setup>
-          export const [a = 1, { b } = { b: 123 }, ...c] = useFoo()
-          export const { d = 2, _: [e], ...f } = useBar()
-        </script>`)
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        a: 'setup',
-        b: 'setup',
-        c: 'setup',
-        d: 'setup',
-        e: 'setup',
-        f: 'setup'
-      })
-    })
-
-    test('export function x() {}', () => {
-      const { content, bindings } = compile(
-        `<script setup>export function x(){}</script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup'
-      })
-    })
+  test('defineOptions()', () => {
+    const { content, bindings } = compile(`
+<script setup>
+import { defineOptions } from 'vue'
+const { props, emit } = defineOptions({
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b']
+})
 
-    test('export class X() {}', () => {
-      const { content, bindings } = compile(
-        `<script setup>export class X {}</script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        X: 'setup'
-      })
-    })
+const bar = 1
+</script>
+  `)
+    // should generate working code
+    assertCode(content)
+    // should anayze bindings
+    expect(bindings).toStrictEqual({
+      foo: 'props',
+      bar: 'const',
+      props: 'const',
+      emit: 'const'
+    })
+
+    // should remove defineOptions import and call
+    expect(content).not.toMatch('defineOptions')
+    // should generate correct setup signature
+    expect(content).toMatch(`setup(__props, { props, emit }) {`)
+    // should include context options in default export
+    expect(content).toMatch(`export default {
+  expose: [],
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],`)
+  })
 
-    test('export { x }', () => {
-      const { content, bindings } = compile(
-        `<script setup>
-           const x = 1
-           const y = 2
-           export { x, y }
-          </script>`
+  describe('imports', () => {
+    test('should hoist and expose imports', () => {
+      assertCode(
+        compile(`<script setup>import { ref } from 'vue'</script>`).content
       )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup',
-        y: 'setup'
-      })
     })
 
-    test(`export { x } from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-           export { x, y } from './x'
-          </script>`
+    test('should extract comment for import or type declarations', () => {
+      assertCode(
+        compile(`
+        <script setup>
+        import a from 'a' // comment
+        import b from 'b'
+        </script>
+        `).content
       )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup',
-        y: 'setup'
-      })
     })
 
-    test(`export default from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export default from './x'
-          </script>`,
-        {
-          babelParserPlugins: ['exportDefaultFrom']
-        }
-      )
+    test('dedupe between user & helper', () => {
+      const { content } = compile(`
+      <script setup>
+      import { ref } from 'vue'
+      ref: foo = 1
+      </script>
+      `)
       assertCode(content)
-      expect(bindings).toStrictEqual({})
+      expect(content).toMatch(`import { ref } from 'vue'`)
     })
 
-    test(`export { x as default }`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          import x from './x'
-          const y = 1
-          export { x as default, y }
-          </script>`
-      )
+    test('import dedupe between <script> and <script setup>', () => {
+      const { content } = compile(`
+        <script>
+        import { x } from './x'
+        </script>
+        <script setup>
+        import { x } from './x'
+        x()
+        </script>
+        `)
       assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-      })
-    })
-
-    test(`export { x as default } from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export { x as default, y } from './x'
-          </script>`
+      expect(content.indexOf(`import { x }`)).toEqual(
+        content.lastIndexOf(`import { x }`)
       )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-      })
     })
+  })
 
-    test(`export * from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export * from './x'
-          export const y = 1
-          </script>`
+  describe('inlineTemplate mode', () => {
+    test('should work', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import { ref } from 'vue'
+        const count = ref(0)
+        </script>
+        <template>
+          <div>{{ count }}</div>
+          <div>static</div>
+        </template>
+        `,
+        { inlineTemplate: true }
       )
+      // check snapshot and make sure helper imports and
+      // hoists are placed correctly.
       assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-        // in this case we cannot extract bindings from ./x so it falls back
-        // to runtime proxy dispatching
-      })
     })
 
-    test('export default in <script setup>', () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export default {
-            props: ['foo']
-          }
-          export const y = 1
-          </script>`
+    test('avoid unref() when necessary', () => {
+      // function, const, component import
+      const { content } = compile(
+        `
+        <script setup>
+        import { ref, defineOptions } from 'vue'
+        import Foo from './Foo.vue'
+        import other from './util'
+        const count = ref(0)
+        const constant = {}
+        function fn() {}
+        </script>
+        <template>
+          <Foo/>
+          <div @click="fn">{{ count }} {{ constant }} {{ other }}</div>
+        </template>
+        `,
+        { inlineTemplate: true }
       )
       assertCode(content)
-      expect(bindings).toStrictEqual({
-        foo: 'props',
-        y: 'setup'
-      })
+      // no need to unref vue component import
+      expect(content).toMatch(`createVNode(Foo)`)
+      // should unref other imports
+      expect(content).toMatch(`unref(other)`)
+      // no need to unref constant literals
+      expect(content).not.toMatch(`unref(constant)`)
+      // should unref const w/ call init (e.g. ref())
+      expect(content).toMatch(`unref(count)`)
+      // no need to unref function declarations
+      expect(content).toMatch(`{ onClick: fn }`)
+      // no need to mark constant fns in patch flag
+      expect(content).not.toMatch(`PROPS`)
     })
   })
 
-  describe('<script setup lang="ts">', () => {
+  describe('with TypeScript', () => {
     test('hoist type declarations', () => {
-      const { content, bindings } = compile(`
+      const { content } = compile(`
       <script setup lang="ts">
         export interface Foo {}
         type Bar = {}
-        export const a = 1
       </script>`)
       assertCode(content)
-      expect(bindings).toStrictEqual({ a: 'setup' })
     })
 
-    test('extract props', () => {
+    test('defineOptions w/ runtime options', () => {
       const { content } = compile(`
-      <script setup="myProps" lang="ts">
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+const { props, emit } = defineOptions({
+  props: { foo: String },
+  emits: ['a', 'b']
+})
+</script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`export default _defineComponent({
+  expose: [],
+  props: { foo: String },
+  emits: ['a', 'b'],
+  setup(__props, { props, emit }) {`)
+    })
+
+    test('defineOptions w/ type / extract props', () => {
+      const { content, bindings } = compile(`
+      <script setup lang="ts">
+      import { defineOptions } from 'vue'
       interface Test {}
 
       type Alias = number[]
 
-      declare const myProps: {
-        string: string
-        number: number
-        boolean: boolean
-        object: object
-        objectLiteral: { a: number }
-        fn: (n: number) => void
-        functionRef: Function
-        objectRef: Object
-        array: string[]
-        arrayRef: Array<any>
-        tuple: [number, number]
-        set: Set<string>
-        literal: 'foo'
-        optional?: any
-        recordRef: Record<string, null>
-        interface: Test
-        alias: Alias
-
-        union: string | number
-        literalUnion: 'foo' | 'bar'
-        literalUnionMixed: 'foo' | 1 | boolean
-        intersection: Test & {}
-      }
+      defineOptions<{
+        props: {
+          string: string
+          number: number
+          boolean: boolean
+          object: object
+          objectLiteral: { a: number }
+          fn: (n: number) => void
+          functionRef: Function
+          objectRef: Object
+          array: string[]
+          arrayRef: Array<any>
+          tuple: [number, number]
+          set: Set<string>
+          literal: 'foo'
+          optional?: any
+          recordRef: Record<string, null>
+          interface: Test
+          alias: Alias
+
+          union: string | number
+          literalUnion: 'foo' | 'bar'
+          literalUnionMixed: 'foo' | 1 | boolean
+          intersection: Test & {}
+        }
+      }>()
       </script>`)
       assertCode(content)
       expect(content).toMatch(`string: { type: String, required: true }`)
@@ -277,21 +265,57 @@ import b from 'b'
         `literalUnionMixed: { type: [String, Number, Boolean], required: true }`
       )
       expect(content).toMatch(`intersection: { type: Object, required: true }`)
+      expect(bindings).toStrictEqual({
+        string: 'props',
+        number: 'props',
+        boolean: 'props',
+        object: 'props',
+        objectLiteral: 'props',
+        fn: 'props',
+        functionRef: 'props',
+        objectRef: 'props',
+        array: 'props',
+        arrayRef: 'props',
+        tuple: 'props',
+        set: 'props',
+        literal: 'props',
+        optional: 'props',
+        recordRef: 'props',
+        interface: 'props',
+        alias: 'props',
+        union: 'props',
+        literalUnion: 'props',
+        literalUnionMixed: 'props',
+        intersection: 'props'
+      })
     })
 
-    test('extract emits', () => {
+    test('defineOptions w/ type / extract emits', () => {
       const { content } = compile(`
-      <script setup="_, { emit: myEmit }" lang="ts">
-      declare function myEmit(e: 'foo' | 'bar'): void
-      declare function myEmit(e: 'baz', id: number): void
+      <script setup lang="ts">
+      import { defineOptions } from 'vue'
+      const { emit } = defineOptions<{
+        emit: (e: 'foo' | 'bar') => void
+      }>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`props: {},\n  emit: (e: 'foo' | 'bar') => void,`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineOptions w/ type / extract emits (union)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      import { defineOptions } from 'vue'
+      const { emit } = defineOptions<{
+        emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)
+      }>()
       </script>
       `)
       assertCode(content)
       expect(content).toMatch(
-        `declare function __emit__(e: 'foo' | 'bar'): void`
-      )
-      expect(content).toMatch(
-        `declare function __emit__(e: 'baz', id: number): void`
+        `props: {},\n  emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void),`
       )
       expect(content).toMatch(
         `emits: ["foo", "bar", "baz"] as unknown as undefined`
@@ -333,7 +357,7 @@ import b from 'b'
     test('w/ <script setup>', () => {
       assertCode(
         compile(
-          `<script setup>export const color = 'red'</script>\n` +
+          `<script setup>const color = 'red'</script>\n` +
             `<style vars="{ color }">div{ color: var(--color); }</style>`
         ).content
       )
@@ -343,9 +367,7 @@ import b from 'b'
   describe('async/await detection', () => {
     function assertAwaitDetection(code: string, shouldAsync = true) {
       const { content } = compile(`<script setup>${code}</script>`)
-      expect(content).toMatch(
-        `export ${shouldAsync ? `async ` : ``}function setup`
-      )
+      expect(content).toMatch(`${shouldAsync ? `async ` : ``}setup()`)
     }
 
     test('expression statement', () => {
@@ -356,8 +378,8 @@ import b from 'b'
       assertAwaitDetection(`const a = 1 + (await foo)`)
     })
 
-    test('export', () => {
-      assertAwaitDetection(`export const a = 1 + (await foo)`)
+    test('ref', () => {
+      assertAwaitDetection(`ref: a = 1 + (await foo)`)
     })
 
     test('nested statements', () => {
@@ -366,7 +388,7 @@ import b from 'b'
 
     test('should ignore await inside functions', () => {
       // function declaration
-      assertAwaitDetection(`export async function foo() { await bar }`, false)
+      assertAwaitDetection(`async function foo() { await bar }`, false)
       // function expression
       assertAwaitDetection(`const foo = async () => { await bar }`, false)
       // object method
@@ -379,6 +401,202 @@ import b from 'b'
     })
   })
 
+  describe('ref: syntax sugar', () => {
+    test('convert ref declarations', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: foo
+      ref: a = 1
+      ref: b = {
+        count: 0
+      }
+      let c = () => {}
+      let d
+      </script>`)
+      expect(content).toMatch(`import { ref as _ref } from 'vue'`)
+      expect(content).not.toMatch(`ref: foo`)
+      expect(content).not.toMatch(`ref: a`)
+      expect(content).not.toMatch(`ref: b`)
+      expect(content).toMatch(`const foo = _ref()`)
+      expect(content).toMatch(`const a = _ref(1)`)
+      expect(content).toMatch(`
+      const b = _ref({
+        count: 0
+      })
+      `)
+      // normal declarations left untouched
+      expect(content).toMatch(`let c = () => {}`)
+      expect(content).toMatch(`let d`)
+      assertCode(content)
+      expect(bindings).toStrictEqual({
+        foo: 'setup',
+        a: 'setup',
+        b: 'setup',
+        c: 'setup',
+        d: 'setup'
+      })
+    })
+
+    test('multi ref declarations', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: a = 1, b = 2, c = {
+        count: 0
+      }
+      </script>`)
+      expect(content).toMatch(`
+      const a = _ref(1), b = _ref(2), c = _ref({
+        count: 0
+      })
+      `)
+      expect(content).toMatch(`return { a, b, c }`)
+      assertCode(content)
+      expect(bindings).toStrictEqual({
+        a: 'setup',
+        b: 'setup',
+        c: 'setup'
+      })
+    })
+
+    test('should not convert non ref labels', () => {
+      const { content } = compile(`<script setup>
+      foo: a = 1, b = 2, c = {
+        count: 0
+      }
+      </script>`)
+      expect(content).toMatch(`foo: a = 1, b = 2`)
+      assertCode(content)
+    })
+
+    test('accessing ref binding', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 1
+      console.log(a)
+      function get() {
+        return a + 1
+      }
+      </script>`)
+      expect(content).toMatch(`console.log(a.value)`)
+      expect(content).toMatch(`return a.value + 1`)
+      assertCode(content)
+    })
+
+    test('cases that should not append .value', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 1
+      console.log(b.a)
+      function get(a) {
+        return a + 1
+      }
+      </script>`)
+      expect(content).not.toMatch(`a.value`)
+    })
+
+    test('mutating ref binding', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 1
+      ref: b = { count: 0 }
+      function inc() {
+        a++
+        a = a + 1
+        b.count++
+        b.count = b.count + 1
+      }
+      </script>`)
+      expect(content).toMatch(`a.value++`)
+      expect(content).toMatch(`a.value = a.value + 1`)
+      expect(content).toMatch(`b.value.count++`)
+      expect(content).toMatch(`b.value.count = b.value.count + 1`)
+      assertCode(content)
+    })
+
+    test('using ref binding in property shorthand', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 1
+      const b = { a }
+      function test() {
+        const { a } = b
+      }
+      </script>`)
+      expect(content).toMatch(`const b = { a: a.value }`)
+      // should not convert destructure
+      expect(content).toMatch(`const { a } = b`)
+      assertCode(content)
+    })
+
+    test('object destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: n = 1, ({ a, b: c, d = 1, e: f = 2, ...g } = useFoo())
+      console.log(n, a, c, d, f, g)
+      </script>`)
+      expect(content).toMatch(
+        `const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()`
+      )
+      expect(content).toMatch(`\nconst a = _ref(__a);`)
+      expect(content).not.toMatch(`\nconst b = _ref(__b);`)
+      expect(content).toMatch(`\nconst c = _ref(__c);`)
+      expect(content).toMatch(`\nconst d = _ref(__d);`)
+      expect(content).not.toMatch(`\nconst e = _ref(__e);`)
+      expect(content).toMatch(`\nconst f = _ref(__f);`)
+      expect(content).toMatch(`\nconst g = _ref(__g);`)
+      expect(content).toMatch(
+        `console.log(n.value, a.value, c.value, d.value, f.value, g.value)`
+      )
+      expect(content).toMatch(`return { n, a, c, d, f, g }`)
+      expect(bindings).toStrictEqual({
+        n: 'setup',
+        a: 'setup',
+        c: 'setup',
+        d: 'setup',
+        f: 'setup',
+        g: 'setup'
+      })
+      assertCode(content)
+    })
+
+    test('array destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: n = 1, [a, b = 1, ...c] = useFoo()
+      console.log(n, a, b, c)
+      </script>`)
+      expect(content).toMatch(
+        `const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()`
+      )
+      expect(content).toMatch(`\nconst a = _ref(__a);`)
+      expect(content).toMatch(`\nconst b = _ref(__b);`)
+      expect(content).toMatch(`\nconst c = _ref(__c);`)
+      expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
+      expect(content).toMatch(`return { n, a, b, c }`)
+      expect(bindings).toStrictEqual({
+        n: 'setup',
+        a: 'setup',
+        b: 'setup',
+        c: 'setup'
+      })
+      assertCode(content)
+    })
+
+    test('nested destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: [{ a: { b }}] = useFoo()
+      ref: ({ c: [d, e] } = useBar())
+      console.log(b, d, e)
+      </script>`)
+      expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`)
+      expect(content).toMatch(`const { c: [__d, __e] } = useBar()`)
+      expect(content).not.toMatch(`\nconst a = _ref(__a);`)
+      expect(content).not.toMatch(`\nconst c = _ref(__c);`)
+      expect(content).toMatch(`\nconst b = _ref(__b);`)
+      expect(content).toMatch(`\nconst d = _ref(__d);`)
+      expect(content).toMatch(`\nconst e = _ref(__e);`)
+      expect(content).toMatch(`return { b, d, e }`)
+      expect(bindings).toStrictEqual({
+        b: 'setup',
+        d: 'setup',
+        e: 'setup'
+      })
+      assertCode(content)
+    })
+  })
+
   describe('errors', () => {
     test('<script> and <script setup> must have same lang', () => {
       expect(() =>
@@ -386,145 +604,105 @@ import b from 'b'
       ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
-    test('export local as default', () => {
+    const moduleErrorMsg = `cannot contain ES module exports`
+
+    test('non-type named exports', () => {
+      expect(() =>
+        compile(`<script setup>
+        export const a = 1
+        </script>`)
+      ).toThrow(moduleErrorMsg)
+
+      expect(() =>
+        compile(`<script setup>
+        export * from './foo'
+        </script>`)
+      ).toThrow(moduleErrorMsg)
+
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
         </script>`)
-      ).toThrow(`Cannot export locally defined variable as default`)
+      ).toThrow(moduleErrorMsg)
     })
 
-    test('export default referencing local var', () => {
+    test('ref: non-assignment expressions', () => {
       expect(() =>
         compile(`<script setup>
-          const bar = 1
-          export default {
-            props: {
-              foo: {
-                default: () => bar
-              }
+        ref: a = 1, foo()
+        </script>`)
+      ).toThrow(`ref: statements can only contain assignment expressions`)
+    })
+
+    test('defineOptions() w/ both type and non-type args', () => {
+      expect(() => {
+        compile(`<script setup lang="ts">
+        import { defineOptions } from 'vue'
+        defineOptions<{}>({})
+        </script>`)
+      }).toThrow(`cannot accept both type and non-type arguments`)
+    })
+
+    test('defineOptions() referencing local var', () => {
+      expect(() =>
+        compile(`<script setup>
+        import { defineOptions } from 'vue'
+        const bar = 1
+        defineOptions({
+          props: {
+            foo: {
+              default: () => bar
             }
           }
+        })
         </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('export default referencing exports', () => {
+    test('defineOptions() referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
-        export const bar = 1
-        export default {
-          props: bar
-        }
+        import { defineOptions } from 'vue'
+        ref: bar = 1
+        defineOptions({
+          props: { bar }
+        })
       </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('should allow export default referencing scope var', () => {
+    test('should allow defineOptions() referencing scope var', () => {
       assertCode(
         compile(`<script setup>
+          import { defineOptions } from 'vue'
           const bar = 1
-          export default {
+          defineOptions({
             props: {
               foo: {
                 default: bar => bar + 1
               }
             }
-          }
+          })
         </script>`).content
       )
     })
 
-    test('should allow export default referencing imported binding', () => {
+    test('should allow defineOptions() referencing imported binding', () => {
       assertCode(
         compile(`<script setup>
+          import { defineOptions } from 'vue'
           import { bar } from './bar'
-          export { bar }
-          export default {
+          defineOptions({
             props: {
               foo: {
                 default: () => bar
               }
             }
-          }
+          })
         </script>`).content
       )
     })
-
-    test('should allow export default referencing re-exported binding', () => {
-      assertCode(
-        compile(`<script setup>
-          export { bar } from './bar'
-          export default {
-            props: {
-              foo: {
-                default: () => bar
-              }
-            }
-          }
-        </script>`).content
-      )
-    })
-
-    test('error on duplicated default export', () => {
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      const x = {}
-      export { x as default }
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      export { x as default } from './y'
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      export { x as default } from './y'
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      const x = {}
-      export { x as default }
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-    })
   })
 })
 
@@ -725,11 +903,12 @@ describe('SFC analyze <script> bindings', () => {
   it('works for script setup', () => {
     const { bindings } = compile(`
       <script setup>
-        export default {
-          props: {
-            foo: String,
-          },
+      import { defineOptions } from 'vue'
+      defineOptions({
+        props: {
+          foo: String,
         }
+      })
       </script>
     `)
     expect(bindings).toStrictEqual({
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 93cc6cc4383..a049d205971 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1,7 +1,7 @@
 import MagicString from 'magic-string'
-import { BindingMetadata } from '@vue/compiler-core'
+import { BindingMetadata, BindingTypes } from '@vue/compiler-core'
 import { SFCDescriptor, SFCScriptBlock } from './parse'
-import { parse, ParserPlugin } from '@babel/parser'
+import { parse as _parse, ParserOptions, ParserPlugin } from '@babel/parser'
 import { babelParserDefaultPlugins, generateCodeFrame } from '@vue/shared'
 import {
   Node,
@@ -10,30 +10,59 @@ import {
   ObjectExpression,
   ArrayPattern,
   Identifier,
-  ExpressionStatement,
-  ArrowFunctionExpression,
   ExportSpecifier,
   Function as FunctionNode,
   TSType,
   TSTypeLiteral,
   TSFunctionType,
-  TSDeclareFunction,
   ObjectProperty,
   ArrayExpression,
-  Statement
+  Statement,
+  Expression,
+  LabeledStatement,
+  TSUnionType
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
-import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
+import {
+  CSS_VARS_HELPER,
+  genCssVarsCode,
+  injectCssVarsCalls
+} from './genCssVars'
+import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+
+const DEFINE_OPTIONS = 'defineOptions'
 
 export interface SFCScriptCompileOptions {
   /**
    * https://babeljs.io/docs/en/babel-parser#plugins
    */
   babelParserPlugins?: ParserPlugin[]
+  /**
+   * Enable ref: label sugar
+   * https://github.com/vuejs/rfcs/pull/228
+   * @default true
+   */
+  refSugar?: boolean
+  /**
+   * Compile the template and inline the resulting render function
+   * directly inside setup().
+   * - Only affects <script setup>
+   * - This should only be used in production because it prevents the template
+   * from being hot-reloaded separately from component state.
+   */
+  inlineTemplate?: boolean
+  templateOptions?: SFCTemplateCompileOptions
 }
 
-let hasWarned = false
+const hasWarned: Record<string, boolean> = {}
+
+function warnOnce(msg: string) {
+  if (!hasWarned[msg]) {
+    hasWarned[msg] = true
+    console.log(`\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
+  }
+}
 
 /**
  * Compile `<script setup>`
@@ -46,12 +75,10 @@ export function compileScript(
 ): SFCScriptBlock {
   const { script, scriptSetup, styles, source, filename } = sfc
 
-  if (__DEV__ && !__TEST__ && !hasWarned && scriptSetup) {
-    hasWarned = true
-    // @ts-ignore `console.info` cannot be null error
-    console[console.info ? 'info' : 'log'](
-      `\n[@vue/compiler-sfc] <script setup> is still an experimental proposal.\n` +
-        `Follow https://github.com/vuejs/rfcs/pull/182 for its status.\n`
+  if (__DEV__ && !__TEST__ && scriptSetup) {
+    warnOnce(
+      `<script setup> is still an experimental proposal.\n` +
+        `Follow its status at https://github.com/vuejs/rfcs/pull/227.`
     )
   }
 
@@ -66,14 +93,14 @@ export function compileScript(
 
   if (!scriptSetup) {
     if (!script) {
-      throw new Error(`SFC contains no <script> tags.`)
+      throw new Error(`[@vue/compiler-sfc] SFC contains no <script> tags.`)
     }
     if (scriptLang && scriptLang !== 'ts') {
       // do not process non js/ts script blocks
       return script
     }
     try {
-      const scriptAst = parse(script.content, {
+      const scriptAst = _parse(script.content, {
         plugins,
         sourceType: 'module'
       }).program.body
@@ -92,7 +119,7 @@ export function compileScript(
 
   if (script && scriptLang !== scriptSetupLang) {
     throw new Error(
-      `<script> and <script setup> must have the same language type.`
+      `[@vue/compiler-sfc] <script> and <script setup> must have the same language type.`
     )
   }
 
@@ -102,52 +129,277 @@ export function compileScript(
   }
 
   const defaultTempVar = `__default__`
-  const bindings: BindingMetadata = {}
-  const imports: Record<string, string> = {}
-  const setupScopeVars: Record<string, boolean> = {}
-  const setupExports: Record<string, boolean> = {}
-  let exportAllIndex = 0
+  const bindingMetadata: BindingMetadata = {}
+  const helperImports: Set<string> = new Set()
+  const userImports: Record<
+    string,
+    {
+      imported: string | null
+      source: string
+    }
+  > = Object.create(null)
+  const setupBindings: Record<
+    string,
+    BindingTypes.SETUP | BindingTypes.CONST
+  > = Object.create(null)
+  const refBindings: Record<string, BindingTypes.SETUP> = Object.create(null)
+  const refIdentifiers: Set<Identifier> = new Set()
+  const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
-  let needDefaultExportRefCheck = false
+  let hasOptionsCall = false
+  let optionsExp: string | undefined
+  let optionsArg: ObjectExpression | undefined
+  let optionsType: TSTypeLiteral | undefined
   let hasAwait = false
+  // context types to generate
+  let propsType = `{}`
+  let emitType = `(e: string, ...args: any[]) => void`
+  let slotsType = `Slots`
+  let attrsType = `Record<string, any>`
+  // props/emits declared via types
+  const typeDeclaredProps: Record<string, PropTypeData> = {}
+  const typeDeclaredEmits: Set<string> = new Set()
+  // record declared types for runtime props type generation
+  const declaredTypes: Record<string, string[]> = {}
 
-  const checkDuplicateDefaultExport = (node: Node) => {
-    if (defaultExport) {
-      // <script> already has export default
-      throw new Error(
-        `Default export is already declared in normal <script>.\n\n` +
-          generateCodeFrame(
-            source,
-            node.start! + startOffset,
-            node.start! + startOffset + `export default`.length
-          )
-      )
-    }
-  }
-
+  // magic-string state
   const s = new MagicString(source)
   const startOffset = scriptSetup.loc.start.offset
   const endOffset = scriptSetup.loc.end.offset
   const scriptStartOffset = script && script.loc.start.offset
   const scriptEndOffset = script && script.loc.end.offset
 
-  let scriptAst
+  function helper(key: string): string {
+    helperImports.add(key)
+    return `_${key}`
+  }
+
+  function parse(
+    input: string,
+    options: ParserOptions,
+    offset: number
+  ): Statement[] {
+    try {
+      return _parse(input, options).program.body
+    } catch (e) {
+      e.message = `[@vue/compiler-sfc] ${e.message}\n\n${generateCodeFrame(
+        source,
+        e.pos + offset,
+        e.pos + offset + 1
+      )}`
+      throw e
+    }
+  }
+
+  function error(
+    msg: string,
+    node: Node,
+    end: number = node.end! + startOffset
+  ) {
+    throw new Error(
+      `[@vue/compiler-sfc] ${msg}\n\n` +
+        generateCodeFrame(source, node.start! + startOffset, end)
+    )
+  }
+
+  function processDefineOptions(node: Node): boolean {
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === DEFINE_OPTIONS
+    ) {
+      if (hasOptionsCall) {
+        error(`duplicate ${DEFINE_OPTIONS}() call`, node)
+      }
+      hasOptionsCall = true
+      const optsArg = node.arguments[0]
+      if (optsArg) {
+        if (optsArg.type === 'ObjectExpression') {
+          optionsArg = optsArg
+        } else {
+          error(
+            `${DEFINE_OPTIONS}() argument must be an object literal.`,
+            optsArg
+          )
+        }
+      }
+      // context call has type parameters - infer runtime types from it
+      if (node.typeParameters) {
+        if (optionsArg) {
+          error(
+            `${DEFINE_OPTIONS}() cannot accept both type and non-type arguments ` +
+              `at the same time. Use one or the other.`,
+            node
+          )
+        }
+        const typeArg = node.typeParameters.params[0]
+        if (typeArg.type === 'TSTypeLiteral') {
+          optionsType = typeArg
+        } else {
+          error(
+            `type argument passed to ${DEFINE_OPTIONS}() must be a literal type.`,
+            typeArg
+          )
+        }
+      }
+      return true
+    }
+    return false
+  }
+
+  function processRefExpression(exp: Expression, statement: LabeledStatement) {
+    if (exp.type === 'AssignmentExpression') {
+      const { left, right } = exp
+      if (left.type === 'Identifier') {
+        registerRefBinding(left)
+        s.prependRight(right.start! + startOffset, `${helper('ref')}(`)
+        s.appendLeft(right.end! + startOffset, ')')
+      } else if (left.type === 'ObjectPattern') {
+        // remove wrapping parens
+        for (let i = left.start!; i > 0; i--) {
+          const char = source[i + startOffset]
+          if (char === '(') {
+            s.remove(i + startOffset, i + startOffset + 1)
+            break
+          }
+        }
+        for (let i = left.end!; i > 0; i++) {
+          const char = source[i + startOffset]
+          if (char === ')') {
+            s.remove(i + startOffset, i + startOffset + 1)
+            break
+          }
+        }
+        processRefObjectPattern(left, statement)
+      } else if (left.type === 'ArrayPattern') {
+        processRefArrayPattern(left, statement)
+      }
+    } else if (exp.type === 'SequenceExpression') {
+      // possible multiple declarations
+      // ref: x = 1, y = 2
+      exp.expressions.forEach(e => processRefExpression(e, statement))
+    } else if (exp.type === 'Identifier') {
+      registerRefBinding(exp)
+      s.appendLeft(exp.end! + startOffset, ` = ${helper('ref')}()`)
+    } else {
+      error(`ref: statements can only contain assignment expressions.`, exp)
+    }
+  }
+
+  function registerRefBinding(id: Identifier) {
+    if (id.name[0] === '$') {
+      error(`ref variable identifiers cannot start with $.`, id)
+    }
+    refBindings[id.name] = setupBindings[id.name] = BindingTypes.SETUP
+    refIdentifiers.add(id)
+  }
+
+  function processRefObjectPattern(
+    pattern: ObjectPattern,
+    statement: LabeledStatement
+  ) {
+    for (const p of pattern.properties) {
+      let nameId: Identifier | undefined
+      if (p.type === 'ObjectProperty') {
+        if (p.key.start! === p.value.start!) {
+          // shorthand { foo } --> { foo: __foo }
+          nameId = p.key as Identifier
+          s.appendLeft(nameId.end! + startOffset, `: __${nameId.name}`)
+          if (p.value.type === 'AssignmentPattern') {
+            // { foo = 1 }
+            refIdentifiers.add(p.value.left as Identifier)
+          }
+        } else {
+          if (p.value.type === 'Identifier') {
+            // { foo: bar } --> { foo: __bar }
+            nameId = p.value
+            s.prependRight(nameId.start! + startOffset, `__`)
+          } else if (p.value.type === 'ObjectPattern') {
+            processRefObjectPattern(p.value, statement)
+          } else if (p.value.type === 'ArrayPattern') {
+            processRefArrayPattern(p.value, statement)
+          } else if (p.value.type === 'AssignmentPattern') {
+            // { foo: bar = 1 } --> { foo: __bar = 1 }
+            nameId = p.value.left as Identifier
+            s.prependRight(nameId.start! + startOffset, `__`)
+          }
+        }
+      } else {
+        // rest element { ...foo } --> { ...__foo }
+        nameId = p.argument as Identifier
+        s.prependRight(nameId.start! + startOffset, `__`)
+      }
+      if (nameId) {
+        registerRefBinding(nameId)
+        // append binding declarations after the parent statement
+        s.appendLeft(
+          statement.end! + startOffset,
+          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+        )
+      }
+    }
+  }
+
+  function processRefArrayPattern(
+    pattern: ArrayPattern,
+    statement: LabeledStatement
+  ) {
+    for (const e of pattern.elements) {
+      if (!e) continue
+      let nameId: Identifier | undefined
+      if (e.type === 'Identifier') {
+        // [a] --> [__a]
+        nameId = e
+      } else if (e.type === 'AssignmentPattern') {
+        // [a = 1] --> [__a = 1]
+        nameId = e.left as Identifier
+      } else if (e.type === 'RestElement') {
+        // [...a] --> [...__a]
+        nameId = e.argument as Identifier
+      } else if (e.type === 'ObjectPattern') {
+        processRefObjectPattern(e, statement)
+      } else if (e.type === 'ArrayPattern') {
+        processRefArrayPattern(e, statement)
+      }
+      if (nameId) {
+        registerRefBinding(nameId)
+        // prefix original
+        s.prependRight(nameId.start! + startOffset, `__`)
+        // append binding declarations after the parent statement
+        s.appendLeft(
+          statement.end! + startOffset,
+          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+        )
+      }
+    }
+  }
 
   // 1. process normal <script> first if it exists
+  let scriptAst
   if (script) {
     // import dedupe between <script> and <script setup>
-    scriptAst = parse(script.content, {
-      plugins,
-      sourceType: 'module'
-    }).program.body
+    scriptAst = parse(
+      script.content,
+      {
+        plugins,
+        sourceType: 'module'
+      },
+      scriptStartOffset!
+    )
 
     for (const node of scriptAst) {
       if (node.type === 'ImportDeclaration') {
         // record imports for dedupe
-        for (const {
-          local: { name }
-        } of node.specifiers) {
-          imports[name] = node.source.value
+        for (const specifier of node.specifiers) {
+          const name = specifier.local.name
+          const imported =
+            specifier.type === 'ImportSpecifier' &&
+            specifier.imported.type === 'Identifier' &&
+            specifier.imported.name
+          userImports[name] = {
+            imported: imported || null,
+            source: node.source.value
+          }
         }
       } else if (node.type === 'ExportDefaultDeclaration') {
         // export default
@@ -197,70 +449,19 @@ export function compileScript(
     }
   }
 
-  // 2. check <script setup="xxx"> function signature
-  const setupValue = scriptSetup.setup
-  const hasExplicitSignature = typeof setupValue === 'string'
-
-  let propsVar: string | undefined
-  let emitVar: string | undefined
-  let slotsVar: string | undefined
-  let attrsVar: string | undefined
-
-  let propsType = `{}`
-  let emitType = `(e: string, ...args: any[]) => void`
-  let slotsType = `__Slots__`
-  let attrsType = `Record<string, any>`
-
-  let propsASTNode
-  let setupCtxASTNode
-
-  // props/emits declared via types
-  const typeDeclaredProps: Record<string, PropTypeData> = {}
-  const typeDeclaredEmits: Set<string> = new Set()
-  // record declared types for runtime props type generation
-  const declaredTypes: Record<string, string[]> = {}
-
-  if (isTS && hasExplicitSignature) {
-    // <script setup="xxx" lang="ts">
-    // parse the signature to extract the props/emit variables the user wants
-    // we need them to find corresponding type declarations.
-    const signatureAST = parse(`(${setupValue})=>{}`, { plugins }).program
-      .body[0]
-    const params = ((signatureAST as ExpressionStatement)
-      .expression as ArrowFunctionExpression).params
-    if (params[0] && params[0].type === 'Identifier') {
-      propsASTNode = params[0]
-      propsVar = propsASTNode.name
-    }
-    if (params[1] && params[1].type === 'ObjectPattern') {
-      setupCtxASTNode = params[1]
-      for (const p of params[1].properties) {
-        if (
-          p.type === 'ObjectProperty' &&
-          p.key.type === 'Identifier' &&
-          p.value.type === 'Identifier'
-        ) {
-          if (p.key.name === 'emit') {
-            emitVar = p.value.name
-          } else if (p.key.name === 'slots') {
-            slotsVar = p.value.name
-          } else if (p.key.name === 'attrs') {
-            attrsVar = p.value.name
-          }
-        }
-      }
-    }
-  }
-
-  // 3. parse <script setup> and  walk over top level statements
-  const scriptSetupAst = parse(scriptSetup.content, {
-    plugins: [
-      ...plugins,
-      // allow top level await but only inside <script setup>
-      'topLevelAwait'
-    ],
-    sourceType: 'module'
-  }).program.body
+  // 2. parse <script setup> and  walk over top level statements
+  const scriptSetupAst = parse(
+    scriptSetup.content,
+    {
+      plugins: [
+        ...plugins,
+        // allow top level await but only inside <script setup>
+        'topLevelAwait'
+      ],
+      sourceType: 'module'
+    },
+    startOffset
+  )
 
   for (const node of scriptSetupAst) {
     const start = node.start! + startOffset
@@ -280,6 +481,34 @@ export function compileScript(
       end++
     }
 
+    // process `ref: x` bindings (convert to refs)
+    if (
+      node.type === 'LabeledStatement' &&
+      node.label.name === 'ref' &&
+      node.body.type === 'ExpressionStatement'
+    ) {
+      if (enableRefSugar) {
+        warnOnce(
+          `ref: sugar is still an experimental proposal and is not ` +
+            `guaranteed to be a part of <script setup>.\n` +
+            `Follow its status at https://github.com/vuejs/rfcs/pull/228.`
+        )
+        s.overwrite(
+          node.label.start! + startOffset,
+          node.body.start! + startOffset,
+          'const '
+        )
+        processRefExpression(node.body.expression, node)
+      } else {
+        // TODO if we end up shipping ref: sugar as an opt-in feature,
+        // need to proxy the option in vite, vue-loader and rollup-plugin-vue.
+        error(
+          `ref: sugar needs to be explicitly enabled via vite or vue-loader options.`,
+          node
+        )
+      }
+    }
+
     if (node.type === 'ImportDeclaration') {
       // import declarations are moved to top
       s.move(start, end, 0)
@@ -287,15 +516,35 @@ export function compileScript(
       let prev
       let removed = 0
       for (const specifier of node.specifiers) {
-        if (imports[specifier.local.name]) {
-          // already imported in <script setup>, dedupe
+        const local = specifier.local.name
+        const imported =
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
+          specifier.imported.name
+        const source = node.source.value
+        const existing = userImports[local]
+        if (source === 'vue' && imported === DEFINE_OPTIONS) {
           removed++
           s.remove(
             prev ? prev.end! + startOffset : specifier.start! + startOffset,
             specifier.end! + startOffset
           )
+        } else if (existing) {
+          if (existing.source === source && existing.imported === imported) {
+            // already imported in <script setup>, dedupe
+            removed++
+            s.remove(
+              prev ? prev.end! + startOffset : specifier.start! + startOffset,
+              specifier.end! + startOffset
+            )
+          } else {
+            error(`different imports aliased to same local name.`, specifier)
+          }
         } else {
-          imports[specifier.local.name] = node.source.value
+          userImports[local] = {
+            imported: imported || null,
+            source: node.source.value
+          }
         }
         prev = specifier
       }
@@ -304,170 +553,39 @@ export function compileScript(
       }
     }
 
-    if (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') {
-      // named exports
-      if (node.declaration) {
-        // variable/function/class declarations.
-        // remove leading `export ` keyword
-        s.remove(start, start + 7)
-        walkDeclaration(node.declaration, setupExports)
-      }
-      if (node.specifiers.length) {
-        // named export with specifiers
-        if (node.source) {
-          // export { x } from './x'
-          // change it to import and move to top
-          s.overwrite(start, start + 6, 'import')
-          s.move(start, end, 0)
-        } else {
-          // export { x }
-          s.remove(start, end)
-        }
-        for (const specifier of node.specifiers) {
-          if (specifier.type === 'ExportDefaultSpecifier') {
-            // export default from './x'
-            // rewrite to `import __default__ from './x'`
-            checkDuplicateDefaultExport(node)
-            defaultExport = node
-            s.overwrite(
-              specifier.exported.start! + startOffset,
-              specifier.exported.start! + startOffset + 7,
-              defaultTempVar
-            )
-          } else if (
-            specifier.type === 'ExportSpecifier' &&
-            specifier.exported.type === 'Identifier'
-          ) {
-            if (specifier.exported.name === 'default') {
-              checkDuplicateDefaultExport(node)
-              defaultExport = node
-              // 1. remove specifier
-              if (node.specifiers.length > 1) {
-                // removing the default specifier from a list of specifiers.
-                // look ahead until we reach the first non , or whitespace char.
-                let end = specifier.end! + startOffset
-                while (end < source.length) {
-                  if (/[^,\s]/.test(source.charAt(end))) {
-                    break
-                  }
-                  end++
-                }
-                s.remove(specifier.start! + startOffset, end)
-              } else {
-                s.remove(node.start! + startOffset!, node.end! + startOffset!)
-              }
-              if (!node.source) {
-                // export { x as default, ... }
-                const local = specifier.local.name
-                if (setupScopeVars[local] || setupExports[local]) {
-                  throw new Error(
-                    `Cannot export locally defined variable as default in <script setup>.\n` +
-                      `Default export must be an object literal with no reference to local scope.\n` +
-                      generateCodeFrame(
-                        source,
-                        specifier.start! + startOffset,
-                        specifier.end! + startOffset
-                      )
-                  )
-                }
-                // rewrite to `const __default__ = x` and move to end
-                s.append(`\nconst ${defaultTempVar} = ${local}\n`)
-              } else {
-                // export { x as default } from './x'
-                // rewrite to `import { x as __default__ } from './x'` and
-                // add to top
-                s.prepend(
-                  `import { ${
-                    specifier.local.name
-                  } as ${defaultTempVar} } from '${node.source.value}'\n`
-                )
-              }
-            } else {
-              setupExports[specifier.exported.name] = true
-              if (node.source) {
-                imports[specifier.exported.name] = node.source.value
-              }
-            }
+    if (
+      node.type === 'ExpressionStatement' &&
+      processDefineOptions(node.expression)
+    ) {
+      s.remove(node.start! + startOffset, node.end! + startOffset)
+    }
+
+    if (node.type === 'VariableDeclaration' && !node.declare) {
+      for (const decl of node.declarations) {
+        if (decl.init && processDefineOptions(decl.init)) {
+          optionsExp = scriptSetup.content.slice(decl.id.start!, decl.id.end!)
+          if (node.declarations.length === 1) {
+            s.remove(node.start! + startOffset, node.end! + startOffset)
+          } else {
+            s.remove(decl.start! + startOffset, decl.end! + startOffset)
           }
         }
       }
     }
 
-    if (node.type === 'ExportAllDeclaration') {
-      // export * from './x'
-      s.overwrite(
-        start,
-        node.source.start! + startOffset,
-        `import * as __export_all_${exportAllIndex++}__ from `
-      )
-      s.move(start, end, 0)
-    }
-
-    if (node.type === 'ExportDefaultDeclaration') {
-      checkDuplicateDefaultExport(node)
-      // export default {} inside <script setup>
-      // this should be kept in module scope - move it to the end
-      s.move(start, end, source.length)
-      s.overwrite(start, start + `export default`.length, `const __default__ =`)
-      // save it for analysis when all imports and variable declarations have
-      // been recorded
-      defaultExport = node
-      needDefaultExportRefCheck = true
-    }
-
+    // walk decalrations to record declared bindings
     if (
       (node.type === 'VariableDeclaration' ||
         node.type === 'FunctionDeclaration' ||
         node.type === 'ClassDeclaration') &&
       !node.declare
     ) {
-      walkDeclaration(node, setupScopeVars)
+      walkDeclaration(node, setupBindings)
     }
 
     // Type declarations
     if (node.type === 'VariableDeclaration' && node.declare) {
       s.remove(start, end)
-      for (const { id } of node.declarations) {
-        if (id.type === 'Identifier') {
-          if (
-            id.typeAnnotation &&
-            id.typeAnnotation.type === 'TSTypeAnnotation'
-          ) {
-            const typeNode = id.typeAnnotation.typeAnnotation
-            const typeString = source.slice(
-              typeNode.start! + startOffset,
-              typeNode.end! + startOffset
-            )
-            if (typeNode.type === 'TSTypeLiteral') {
-              if (id.name === propsVar) {
-                propsType = typeString
-                extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
-              } else if (id.name === slotsVar) {
-                slotsType = typeString
-              } else if (id.name === attrsVar) {
-                attrsType = typeString
-              }
-            } else if (
-              id.name === emitVar &&
-              typeNode.type === 'TSFunctionType'
-            ) {
-              emitType = typeString
-              extractRuntimeEmits(typeNode, typeDeclaredEmits)
-            }
-          }
-        }
-      }
-    }
-
-    if (
-      node.type === 'TSDeclareFunction' &&
-      node.id &&
-      node.id.name === emitVar
-    ) {
-      const index = node.id.start! + startOffset
-      s.overwrite(index, index + emitVar.length, '__emit__')
-      emitType = `typeof __emit__`
-      extractRuntimeEmits(node, typeDeclaredEmits)
     }
 
     // move all type declarations to outer scope
@@ -482,10 +600,7 @@ export function compileScript(
     // walk statements & named exports / variable declarations for top level
     // await
     if (
-      node.type === 'VariableDeclaration' ||
-      (node.type === 'ExportNamedDeclaration' &&
-        node.declaration &&
-        node.declaration.type === 'VariableDeclaration') ||
+      (node.type === 'VariableDeclaration' && !node.declare) ||
       node.type.endsWith('Statement')
     ) {
       ;(walk as any)(node, {
@@ -499,25 +614,109 @@ export function compileScript(
         }
       })
     }
+
+    if (
+      (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') ||
+      node.type === 'ExportAllDeclaration' ||
+      node.type === 'ExportDefaultDeclaration'
+    ) {
+      error(
+        `<script setup> cannot contain ES module exports. ` +
+          `If you are using a previous version of <script setup>, please ` +
+          `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
+        node
+      )
+    }
+  }
+
+  // 3. Do a full walk to rewrite identifiers referencing let exports with ref
+  // value access
+  if (enableRefSugar && Object.keys(refBindings).length) {
+    for (const node of scriptSetupAst) {
+      if (node.type !== 'ImportDeclaration') {
+        walkIdentifiers(node, (id, parent) => {
+          if (refBindings[id.name] && !refIdentifiers.has(id)) {
+            if (isStaticProperty(parent) && parent.shorthand) {
+              // let binding used in a property shorthand
+              // { foo } -> { foo: foo.value }
+              // skip for destructure patterns
+              if (!(parent as any).inPattern) {
+                s.appendLeft(id.end! + startOffset, `: ${id.name}.value`)
+              }
+            } else {
+              s.appendLeft(id.end! + startOffset, '.value')
+            }
+          } else if (id.name[0] === '$' && refBindings[id.name.slice(1)]) {
+            // $xxx raw ref access variables, remove the $ prefix
+            s.remove(id.start! + startOffset, id.start! + startOffset + 1)
+          }
+        })
+      }
+    }
+  }
+
+  // 4. extract runtime props/emits code from setup context type
+  if (optionsType) {
+    for (const m of optionsType.members) {
+      if (m.type === 'TSPropertySignature' && m.key.type === 'Identifier') {
+        const typeNode = m.typeAnnotation!.typeAnnotation
+        const typeString = scriptSetup.content.slice(
+          typeNode.start!,
+          typeNode.end!
+        )
+        const key = m.key.name
+        if (key === 'props') {
+          propsType = typeString
+          if (typeNode.type === 'TSTypeLiteral') {
+            extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
+          } else {
+            // TODO be able to trace references
+            error(`props type must be an object literal type`, typeNode)
+          }
+        } else if (key === 'emit') {
+          emitType = typeString
+          if (
+            typeNode.type === 'TSFunctionType' ||
+            typeNode.type === 'TSUnionType'
+          ) {
+            extractRuntimeEmits(typeNode, typeDeclaredEmits)
+          } else {
+            // TODO be able to trace references
+            error(`emit type must be a function type`, typeNode)
+          }
+        } else if (key === 'attrs') {
+          attrsType = typeString
+        } else if (key === 'slots') {
+          slotsType = typeString
+        } else {
+          error(`invalid setup context property: "${key}"`, m.key)
+        }
+      }
+    }
   }
 
-  // 4. check default export to make sure it doesn't reference setup scope
+  // 5. check useOptions args to make sure it doesn't reference setup scope
   // variables
-  if (needDefaultExportRefCheck) {
-    checkDefaultExport(
-      defaultExport!,
-      setupScopeVars,
-      imports,
-      setupExports,
-      source,
-      startOffset
-    )
+  if (optionsArg) {
+    walkIdentifiers(optionsArg, id => {
+      if (setupBindings[id.name]) {
+        error(
+          `\`${DEFINE_OPTIONS}()\` in <script setup> cannot reference locally ` +
+            `declared variables because it will be hoisted outside of the ` +
+            `setup() function. If your component options requires initialization ` +
+            `in the module scope, use a separate normal <script> to export ` +
+            `the options instead.`,
+          id
+        )
+      }
+    })
   }
 
-  // 5. remove non-script content
+  // 6. remove non-script content
   if (script) {
     if (startOffset < scriptStartOffset!) {
       // <script setup> before <script>
+      s.remove(0, startOffset)
       s.remove(endOffset, scriptStartOffset!)
       s.remove(scriptEndOffset!, source.length)
     } else {
@@ -532,110 +731,161 @@ export function compileScript(
     s.remove(endOffset, source.length)
   }
 
-  // 5. finalize setup argument signature.
-  let args = ``
-  if (isTS) {
-    if (slotsType === '__Slots__') {
-      s.prepend(`import { Slots as __Slots__ } from 'vue'\n`)
+  // 7. finalize setup argument signature.
+  let args = optionsExp ? `__props, ${optionsExp}` : ``
+  if (optionsExp && optionsType) {
+    if (slotsType === 'Slots') {
+      helperImports.add('Slots')
     }
-    const ctxType = `{
+    args += `: {
+  props: ${propsType},
   emit: ${emitType},
   slots: ${slotsType},
   attrs: ${attrsType}
 }`
-    if (hasExplicitSignature) {
-      // inject types to user signature
-      args = setupValue as string
-      const ss = new MagicString(args)
-      if (propsASTNode) {
-        // compensate for () wraper offset
-        ss.appendRight(propsASTNode.end! - 1, `: ${propsType}`)
-      }
-      if (setupCtxASTNode) {
-        ss.appendRight(setupCtxASTNode.end! - 1!, `: ${ctxType}`)
-      }
-      args = ss.toString()
-    }
-  } else {
-    args = hasExplicitSignature ? (setupValue as string) : ``
   }
 
-  // 6. wrap setup code with function.
-  // export the content of <script setup> as a named export, `setup`.
-  // this allows `import { setup } from '*.vue'` for testing purposes.
-  s.prependLeft(
-    startOffset,
-    `\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
-  )
-
-  // generate return statement
-  let returned = `{ ${Object.keys(setupExports).join(', ')} }`
-
-  // handle `export * from`. We need to call `toRefs` on the imported module
-  // object before merging.
-  if (exportAllIndex > 0) {
-    s.prepend(`import { toRefs as __toRefs__ } from 'vue'\n`)
-    for (let i = 0; i < exportAllIndex; i++) {
-      returned += `,\n  __toRefs__(__export_all_${i}__)`
-    }
-    returned = `Object.assign(\n  ${returned}\n)`
+  const allBindings: Record<string, any> = { ...setupBindings }
+  for (const key in userImports) {
+    allBindings[key] = true
   }
 
-  // inject `useCssVars` calls
+  // 8. inject `useCssVars` calls
   if (hasCssVars) {
-    s.prepend(`import { useCssVars as __useCssVars__ } from 'vue'\n`)
+    helperImports.add(CSS_VARS_HELPER)
     for (const style of styles) {
       const vars = style.attrs.vars
       if (typeof vars === 'string') {
         s.prependRight(
           endOffset,
-          `\n${genCssVarsCode(vars, !!style.scoped, setupExports)}`
+          `\n${genCssVarsCode(vars, !!style.scoped, allBindings)}`
         )
       }
     }
   }
 
+  // 9. analyze binding metadata
+  if (scriptAst) {
+    Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
+  }
+  if (optionsType) {
+    for (const key in typeDeclaredProps) {
+      bindingMetadata[key] = BindingTypes.PROPS
+    }
+  }
+  if (optionsArg) {
+    Object.assign(bindingMetadata, analyzeBindingsFromOptions(optionsArg))
+  }
+  for (const [key, { source }] of Object.entries(userImports)) {
+    bindingMetadata[key] = source.endsWith('.vue')
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
+  }
+  for (const key in setupBindings) {
+    bindingMetadata[key] = setupBindings[key]
+  }
+
+  // 10. generate return statement
+  let returned
+  if (options.inlineTemplate) {
+    if (sfc.template) {
+      // inline render function mode - we are going to compile the template and
+      // inline it right here
+      const { code, preamble, tips, errors } = compileTemplate({
+        ...options.templateOptions,
+        filename,
+        source: sfc.template.content,
+        compilerOptions: {
+          inline: true,
+          bindingMetadata
+        }
+        // TODO source map
+      })
+      if (tips.length) {
+        tips.forEach(warnOnce)
+      }
+      const err = errors[0]
+      if (typeof err === 'string') {
+        throw new Error(err)
+      } else if (err) {
+        throw err
+      }
+      if (preamble) {
+        s.prepend(preamble)
+      }
+      returned = code
+    } else {
+      returned = `() => {}`
+    }
+  } else {
+    // return bindings from setup
+    returned = `{ ${Object.keys(allBindings).join(', ')} }`
+  }
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
-  // 7. finalize default export
+  // 11. finalize default export
+  // expose: [] makes <script setup> components "closed" by default.
+  let runtimeOptions = `\n  expose: [],`
+  if (optionsArg) {
+    runtimeOptions += `\n  ${scriptSetup.content
+      .slice(optionsArg.start! + 1, optionsArg.end! - 1)
+      .trim()},`
+  } else if (optionsType) {
+    runtimeOptions +=
+      genRuntimeProps(typeDeclaredProps) + genRuntimeEmits(typeDeclaredEmits)
+  }
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
-    s.prepend(`import { defineComponent as __define__ } from 'vue'\n`)
     // we have to use object spread for types to be merged properly
     // user's TS setting should compile it down to proper targets
     const def = defaultExport ? `\n  ...${defaultTempVar},` : ``
-    const runtimeProps = genRuntimeProps(typeDeclaredProps)
-    const runtimeEmits = genRuntimeEmits(typeDeclaredEmits)
-    s.append(
-      `export default __define__({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
+    // wrap setup code with function.
+    // export the content of <script setup> as a named export, `setup`.
+    // this allows `import { setup } from '*.vue'` for testing purposes.
+    s.prependLeft(
+      startOffset,
+      `\nexport default ${helper(
+        `defineComponent`
+      )}({${def}${runtimeOptions}\n  ${
+        hasAwait ? `async ` : ``
+      }setup(${args}) {\n`
     )
+    s.append(`})`)
   } else {
     if (defaultExport) {
+      // can't rely on spread operator in non ts mode
+      s.prependLeft(
+        startOffset,
+        `\n${hasAwait ? `async ` : ``}function setup(${args}) {\n`
+      )
       s.append(
-        `${defaultTempVar}.setup = setup\nexport default ${defaultTempVar}`
+        `/*#__PURE__*/ Object.assign(${defaultTempVar}, {${runtimeOptions}\n  setup\n})\n` +
+          `export default ${defaultTempVar}`
       )
     } else {
-      s.append(`export default { setup }`)
+      s.prependLeft(
+        startOffset,
+        `\nexport default {${runtimeOptions}\n  ` +
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n`
+      )
+      s.append(`}`)
     }
   }
 
-  // 8. expose bindings for template compiler optimization
-  if (scriptAst) {
-    Object.assign(bindings, analyzeScriptBindings(scriptAst))
+  // 12. finalize Vue helper imports
+  if (helperImports.size > 0) {
+    s.prepend(
+      `import { ${[...helperImports]
+        .map(h => `${h} as _${h}`)
+        .join(', ')} } from 'vue'\n`
+    )
   }
-  Object.keys(setupExports).forEach(key => {
-    bindings[key] = 'setup'
-  })
-  Object.keys(typeDeclaredProps).forEach(key => {
-    bindings[key] = 'props'
-  })
-  Object.assign(bindings, analyzeScriptBindings(scriptSetupAst))
 
   s.trim()
   return {
     ...scriptSetup,
-    bindings,
+    bindings: bindingMetadata,
     content: s.toString(),
     map: (s.generateMap({
       source: filename,
@@ -647,16 +897,36 @@ export function compileScript(
   }
 }
 
-function walkDeclaration(node: Declaration, bindings: Record<string, boolean>) {
+function walkDeclaration(
+  node: Declaration,
+  bindings: Record<string, BindingTypes>
+) {
   if (node.type === 'VariableDeclaration') {
+    const isConst = node.kind === 'const'
     // export const foo = ...
-    for (const { id } of node.declarations) {
+    for (const { id, init } of node.declarations) {
+      const isUseOptionsCall = !!(
+        isConst &&
+        init &&
+        init.type === 'CallExpression' &&
+        init.callee.type === 'Identifier' &&
+        init.callee.name === DEFINE_OPTIONS
+      )
       if (id.type === 'Identifier') {
-        bindings[id.name] = true
+        bindings[id.name] =
+          // if a declaration is a const literal, we can mark it so that
+          // the generated render fn code doesn't need to unref() it
+          isUseOptionsCall ||
+          (isConst &&
+          init!.type !== 'Identifier' && // const a = b
+          init!.type !== 'CallExpression' && // const a = ref()
+            init!.type !== 'MemberExpression') // const a = b.c
+            ? BindingTypes.CONST
+            : BindingTypes.SETUP
       } else if (id.type === 'ObjectPattern') {
-        walkObjectPattern(id, bindings)
+        walkObjectPattern(id, bindings, isConst, isUseOptionsCall)
       } else if (id.type === 'ArrayPattern') {
-        walkArrayPattern(id, bindings)
+        walkArrayPattern(id, bindings, isConst, isUseOptionsCall)
       }
     }
   } else if (
@@ -665,13 +935,15 @@ function walkDeclaration(node: Declaration, bindings: Record<string, boolean>) {
   ) {
     // export function foo() {} / export class Foo {}
     // export declarations must be named.
-    bindings[node.id!.name] = true
+    bindings[node.id!.name] = BindingTypes.CONST
   }
 }
 
 function walkObjectPattern(
   node: ObjectPattern,
-  bindings: Record<string, boolean>
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isUseOptionsCall = false
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -679,43 +951,60 @@ function walkObjectPattern(
       if (p.key.type === 'Identifier') {
         if (p.key === p.value) {
           // const { x } = ...
-          bindings[p.key.name] = true
+          bindings[p.key.name] = isUseOptionsCall
+            ? BindingTypes.CONST
+            : BindingTypes.SETUP
         } else {
-          walkPattern(p.value, bindings)
+          walkPattern(p.value, bindings, isConst, isUseOptionsCall)
         }
       }
     } else {
       // ...rest
       // argument can only be identifer when destructuring
-      bindings[(p.argument as Identifier).name] = true
+      bindings[(p.argument as Identifier).name] = isConst
+        ? BindingTypes.CONST
+        : BindingTypes.SETUP
     }
   }
 }
 
 function walkArrayPattern(
   node: ArrayPattern,
-  bindings: Record<string, boolean>
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isUseOptionsCall = false
 ) {
   for (const e of node.elements) {
-    e && walkPattern(e, bindings)
+    e && walkPattern(e, bindings, isConst, isUseOptionsCall)
   }
 }
 
-function walkPattern(node: Node, bindings: Record<string, boolean>) {
+function walkPattern(
+  node: Node,
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isUseOptionsCall = false
+) {
   if (node.type === 'Identifier') {
-    bindings[node.name] = true
+    bindings[node.name] = isUseOptionsCall
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
   } else if (node.type === 'RestElement') {
     // argument can only be identifer when destructuring
-    bindings[(node.argument as Identifier).name] = true
+    bindings[(node.argument as Identifier).name] = isConst
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
   } else if (node.type === 'ObjectPattern') {
-    walkObjectPattern(node, bindings)
+    walkObjectPattern(node, bindings, isConst)
   } else if (node.type === 'ArrayPattern') {
-    walkArrayPattern(node, bindings)
+    walkArrayPattern(node, bindings, isConst)
   } else if (node.type === 'AssignmentPattern') {
     if (node.left.type === 'Identifier') {
-      bindings[node.left.name] = true
+      bindings[node.left.name] = isUseOptionsCall
+        ? BindingTypes.CONST
+        : BindingTypes.SETUP
     } else {
-      walkPattern(node.left, bindings)
+      walkPattern(node.left, bindings, isConst)
     }
   }
 }
@@ -871,11 +1160,20 @@ function toRuntimeTypeString(types: string[]) {
 }
 
 function extractRuntimeEmits(
-  node: TSFunctionType | TSDeclareFunction,
+  node: TSFunctionType | TSUnionType,
   emits: Set<string>
 ) {
-  const eventName =
-    node.type === 'TSDeclareFunction' ? node.params[0] : node.parameters[0]
+  if (node.type === 'TSUnionType') {
+    for (let t of node.types) {
+      if (t.type === 'TSParenthesizedType') t = t.typeAnnotation
+      if (t.type === 'TSFunctionType') {
+        extractRuntimeEmits(t, emits)
+      }
+    }
+    return
+  }
+
+  const eventName = node.parameters[0]
   if (
     eventName.type === 'Identifier' &&
     eventName.typeAnnotation &&
@@ -903,38 +1201,21 @@ function genRuntimeEmits(emits: Set<string>) {
 }
 
 /**
- * export default {} inside `<script setup>` cannot access variables declared
- * inside since it's hoisted. Walk and check to make sure.
+ * Walk an AST and find identifiers that are variable references.
+ * This is largely the same logic with `transformExpressions` in compiler-core
+ * but with some subtle differences as this needs to handle a wider range of
+ * possible syntax.
  */
-function checkDefaultExport(
+function walkIdentifiers(
   root: Node,
-  scopeVars: Record<string, boolean>,
-  imports: Record<string, string>,
-  exports: Record<string, boolean>,
-  source: string,
-  offset: number
+  onIdentifier: (node: Identifier, parent: Node) => void
 ) {
   const knownIds: Record<string, number> = Object.create(null)
   ;(walk as any)(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node) {
       if (node.type === 'Identifier') {
-        if (
-          !knownIds[node.name] &&
-          !isStaticPropertyKey(node, parent) &&
-          (scopeVars[node.name] || (!imports[node.name] && exports[node.name]))
-        ) {
-          throw new Error(
-            `\`export default\` in <script setup> cannot reference locally ` +
-              `declared variables because it will be hoisted outside of the ` +
-              `setup() function. If your component options requires initialization ` +
-              `in the module scope, use a separate normal <script> to export ` +
-              `the options instead.\n\n` +
-              generateCodeFrame(
-                source,
-                node.start! + offset,
-                node.end! + offset
-              )
-          )
+        if (!knownIds[node.name] && isRefIdentifier(node, parent)) {
+          onIdentifier(node, parent)
         }
       } else if (isFunction(node)) {
         // walk function expressions and add its arguments to known identifiers
@@ -968,6 +1249,12 @@ function checkDefaultExport(
             }
           })
         )
+      } else if (
+        node.type === 'ObjectProperty' &&
+        parent.type === 'ObjectPattern'
+      ) {
+        // mark property in destructure pattern
+        ;(node as any).inPattern = true
       }
     },
     leave(node: Node & { scopeIds?: Set<string> }) {
@@ -983,15 +1270,64 @@ function checkDefaultExport(
   })
 }
 
-function isStaticPropertyKey(node: Node, parent: Node): boolean {
-  return (
-    parent &&
-    (parent.type === 'ObjectProperty' || parent.type === 'ObjectMethod') &&
-    !parent.computed &&
-    parent.key === node
-  )
+function isRefIdentifier(id: Identifier, parent: Node) {
+  // declaration id
+  if (
+    (parent.type === 'VariableDeclarator' ||
+      parent.type === 'ClassDeclaration') &&
+    parent.id === id
+  ) {
+    return false
+  }
+
+  if (isFunction(parent)) {
+    // function decalration/expression id
+    if ((parent as any).id === id) {
+      return false
+    }
+    // params list
+    if (parent.params.includes(id)) {
+      return false
+    }
+  }
+
+  // property key
+  // this also covers object destructure pattern
+  if (isStaticPropertyKey(id, parent)) {
+    return false
+  }
+
+  // array destructure pattern
+  if (parent.type === 'ArrayPattern') {
+    return false
+  }
+
+  // member expression property
+  if (
+    (parent.type === 'MemberExpression' ||
+      parent.type === 'OptionalMemberExpression') &&
+    parent.property === id &&
+    !parent.computed
+  ) {
+    return false
+  }
+
+  // is a special keyword but parsed as identifier
+  if (id.name === 'arguments') {
+    return false
+  }
+
+  return true
 }
 
+const isStaticProperty = (node: Node): node is ObjectProperty =>
+  node &&
+  (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
+  !node.computed
+
+const isStaticPropertyKey = (node: Node, parent: Node) =>
+  isStaticProperty(parent) && parent.key === node
+
 function isFunction(node: Node): node is FunctionNode {
   return /Function(?:Expression|Declaration)$|Method$/.test(node.type)
 }
@@ -1039,72 +1375,78 @@ function getObjectOrArrayExpressionKeys(property: ObjectProperty): string[] {
  * compilation process so this should only be used on single `<script>` SFCs.
  */
 function analyzeScriptBindings(ast: Statement[]): BindingMetadata {
-  const bindings: BindingMetadata = {}
-
   for (const node of ast) {
     if (
       node.type === 'ExportDefaultDeclaration' &&
       node.declaration.type === 'ObjectExpression'
     ) {
-      for (const property of node.declaration.properties) {
-        if (
-          property.type === 'ObjectProperty' &&
-          !property.computed &&
-          property.key.type === 'Identifier'
-        ) {
-          // props
-          if (property.key.name === 'props') {
-            // props: ['foo']
-            // props: { foo: ... }
-            for (const key of getObjectOrArrayExpressionKeys(property)) {
-              bindings[key] = 'props'
-            }
-          }
+      return analyzeBindingsFromOptions(node.declaration)
+    }
+  }
+  return {}
+}
 
-          // inject
-          else if (property.key.name === 'inject') {
-            // inject: ['foo']
-            // inject: { foo: {} }
-            for (const key of getObjectOrArrayExpressionKeys(property)) {
-              bindings[key] = 'options'
-            }
-          }
+function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
+  const bindings: BindingMetadata = {}
+  for (const property of node.properties) {
+    if (
+      property.type === 'ObjectProperty' &&
+      !property.computed &&
+      property.key.type === 'Identifier'
+    ) {
+      // props
+      if (property.key.name === 'props') {
+        // props: ['foo']
+        // props: { foo: ... }
+        for (const key of getObjectOrArrayExpressionKeys(property)) {
+          bindings[key] = BindingTypes.PROPS
+        }
+      }
 
-          // computed & methods
-          else if (
-            property.value.type === 'ObjectExpression' &&
-            (property.key.name === 'computed' ||
-              property.key.name === 'methods')
-          ) {
-            // methods: { foo() {} }
-            // computed: { foo() {} }
-            for (const key of getObjectExpressionKeys(property.value)) {
-              bindings[key] = 'options'
-            }
-          }
+      // inject
+      else if (property.key.name === 'inject') {
+        // inject: ['foo']
+        // inject: { foo: {} }
+        for (const key of getObjectOrArrayExpressionKeys(property)) {
+          bindings[key] = BindingTypes.OPTIONS
         }
+      }
+
+      // computed & methods
+      else if (
+        property.value.type === 'ObjectExpression' &&
+        (property.key.name === 'computed' || property.key.name === 'methods')
+      ) {
+        // methods: { foo() {} }
+        // computed: { foo() {} }
+        for (const key of getObjectExpressionKeys(property.value)) {
+          bindings[key] = BindingTypes.OPTIONS
+        }
+      }
+    }
 
-        // setup & data
-        else if (
-          property.type === 'ObjectMethod' &&
-          property.key.type === 'Identifier' &&
-          (property.key.name === 'setup' || property.key.name === 'data')
+    // setup & data
+    else if (
+      property.type === 'ObjectMethod' &&
+      property.key.type === 'Identifier' &&
+      (property.key.name === 'setup' || property.key.name === 'data')
+    ) {
+      for (const bodyItem of property.body.body) {
+        // setup() {
+        //   return {
+        //     foo: null
+        //   }
+        // }
+        if (
+          bodyItem.type === 'ReturnStatement' &&
+          bodyItem.argument &&
+          bodyItem.argument.type === 'ObjectExpression'
         ) {
-          for (const bodyItem of property.body.body) {
-            // setup() {
-            //   return {
-            //     foo: null
-            //   }
-            // }
-            if (
-              bodyItem.type === 'ReturnStatement' &&
-              bodyItem.argument &&
-              bodyItem.argument.type === 'ObjectExpression'
-            ) {
-              for (const key of getObjectExpressionKeys(bodyItem.argument)) {
-                bindings[key] = property.key.name
-              }
-            }
+          for (const key of getObjectExpressionKeys(bodyItem.argument)) {
+            bindings[key] =
+              property.key.name === 'setup'
+                ? BindingTypes.SETUP
+                : BindingTypes.DATA
           }
         }
       }
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index 5d72cf75dd9..85c26eae886 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -30,6 +30,7 @@ export interface TemplateCompiler {
 
 export interface SFCTemplateCompileResults {
   code: string
+  preamble?: string
   source: string
   tips: string[]
   errors: (string | CompilerError)[]
@@ -168,7 +169,7 @@ function doCompileTemplate({
     nodeTransforms = [transformAssetUrl, transformSrcset]
   }
 
-  let { code, map } = compiler.compile(source, {
+  let { code, preamble, map } = compiler.compile(source, {
     mode: 'module',
     prefixIdentifiers: true,
     hoistStatic: true,
@@ -192,7 +193,7 @@ function doCompileTemplate({
     }
   }
 
-  return { code, source, errors, tips: [], map }
+  return { code, preamble, source, errors, tips: [], map }
 }
 
 function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
diff --git a/packages/compiler-sfc/src/genCssVars.ts b/packages/compiler-sfc/src/genCssVars.ts
index a53608890a7..69d1457f6ff 100644
--- a/packages/compiler-sfc/src/genCssVars.ts
+++ b/packages/compiler-sfc/src/genCssVars.ts
@@ -10,10 +10,12 @@ import { SFCDescriptor } from './parse'
 import { rewriteDefault } from './rewriteDefault'
 import { ParserPlugin } from '@babel/parser'
 
+export const CSS_VARS_HELPER = `useCssVars`
+
 export function genCssVarsCode(
   varsExp: string,
   scoped: boolean,
-  knownBindings?: Record<string, boolean>
+  knownBindings?: Record<string, any>
 ) {
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {
@@ -38,7 +40,7 @@ export function genCssVarsCode(
           })
           .join('')
 
-  return `__useCssVars__(_ctx => (${transformedString})${
+  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString})${
     scoped ? `, true` : ``
   })`
 }
@@ -65,7 +67,7 @@ export function injectCssVarsCalls(
 
   return (
     script +
-    `\nimport { useCssVars as __useCssVars__ } from 'vue'\n` +
+    `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
     `const __injectCSSVars__ = () => {\n${calls}}\n` +
     `const __setup__ = __default__.setup\n` +
     `__default__.setup = __setup__\n` +
diff --git a/packages/runtime-core/__tests__/apiExpose.spec.ts b/packages/runtime-core/__tests__/apiExpose.spec.ts
new file mode 100644
index 00000000000..7695360be59
--- /dev/null
+++ b/packages/runtime-core/__tests__/apiExpose.spec.ts
@@ -0,0 +1,144 @@
+import { nodeOps, render } from '@vue/runtime-test'
+import { defineComponent, h, ref } from '../src'
+
+describe('api: expose', () => {
+  test('via setup context', () => {
+    const Child = defineComponent({
+      render() {},
+      setup(_, { expose }) {
+        expose({
+          foo: ref(1),
+          bar: ref(2)
+        })
+        return {
+          bar: ref(3),
+          baz: ref(4)
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('via options', () => {
+    const Child = defineComponent({
+      render() {},
+      data() {
+        return {
+          foo: 1
+        }
+      },
+      setup() {
+        return {
+          bar: ref(2),
+          baz: ref(3)
+        }
+      },
+      expose: ['foo', 'bar']
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('options + context', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: ['foo'],
+      data() {
+        return {
+          foo: 1
+        }
+      },
+      setup(_, { expose }) {
+        expose({
+          bar: ref(2)
+        })
+        return {
+          bar: ref(3),
+          baz: ref(4)
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('options: empty', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: [],
+      data() {
+        return {
+          foo: 1
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect('foo' in childRef.value).toBe(false)
+  })
+
+  test('options: empty + setup context', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: [],
+      setup(_, { expose }) {
+        expose({
+          foo: 1
+        })
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+  })
+})
diff --git a/packages/runtime-core/src/apiDefineOptions.ts b/packages/runtime-core/src/apiDefineOptions.ts
new file mode 100644
index 00000000000..624b11676fc
--- /dev/null
+++ b/packages/runtime-core/src/apiDefineOptions.ts
@@ -0,0 +1,91 @@
+import { EmitFn, EmitsOptions } from './componentEmits'
+import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
+import { Slots } from './componentSlots'
+import { Directive } from './directives'
+import { warn } from './warning'
+
+interface DefaultContext {
+  props: {}
+  attrs: Record<string, unknown>
+  emit: (...args: any[]) => void
+  slots: Slots
+}
+
+interface InferredContext<P, E> {
+  props: Readonly<P>
+  attrs: Record<string, unknown>
+  emit: EmitFn<E>
+  slots: Slots
+}
+
+type InferContext<T extends Partial<DefaultContext>, P, E> = {
+  [K in keyof DefaultContext]: T[K] extends {} ? T[K] : InferredContext<P, E>[K]
+}
+
+/**
+ * This is a subset of full options that are still useful in the context of
+ * <script setup>. Technically, other options can be used too, but are
+ * discouraged - if using TypeScript, we nudge users away from doing so by
+ * disallowing them in types.
+ */
+interface Options<E extends EmitsOptions, EE extends string> {
+  emits?: E | EE[]
+  name?: string
+  inhertiAttrs?: boolean
+  directives?: Record<string, Directive>
+}
+
+/**
+ * Compile-time-only helper used for declaring options and retrieving props
+ * and the setup context inside `<script setup>`.
+ * This is stripped away in the compiled code and should never be actually
+ * called at runtime.
+ */
+// overload 1: no props
+export function defineOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string
+>(
+  options?: Options<E, EE> & {
+    props?: undefined
+  }
+): InferContext<T, {}, E>
+
+// overload 2: object props
+export function defineOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  PP extends string = string,
+  P = Readonly<{ [key in PP]?: any }>
+>(
+  options?: Options<E, EE> & {
+    props?: PP[]
+  }
+): InferContext<T, P, E>
+
+// overload 3: object props
+export function defineOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions,
+  P = ExtractPropTypes<PP>
+>(
+  options?: Options<E, EE> & {
+    props?: PP
+  }
+): InferContext<T, P, E>
+
+// implementation
+export function defineOptions() {
+  if (__DEV__) {
+    warn(
+      `defineContext() is a compiler-hint helper that is only usable inside ` +
+        `<script setup> of a single file component. It will be compiled away ` +
+        `and should not be used in final distributed code.`
+    )
+  }
+  return 0 as any
+}
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 8f089eb4ee3..61949c4c5ee 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -105,7 +105,7 @@ export interface ComponentInternalOptions {
 export interface FunctionalComponent<P = {}, E extends EmitsOptions = {}>
   extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: SetupContext<E>): any
+  (props: P, ctx: Omit<SetupContext<E, P>, 'expose'>): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
@@ -167,10 +167,12 @@ export const enum LifecycleHooks {
   ERROR_CAPTURED = 'ec'
 }
 
-export interface SetupContext<E = EmitsOptions> {
+export interface SetupContext<E = EmitsOptions, P = Data> {
+  props: P
   attrs: Data
   slots: Slots
   emit: EmitFn<E>
+  expose: (exposed: Record<string, any>) => void
 }
 
 /**
@@ -270,6 +272,9 @@ export interface ComponentInternalInstance {
   // main proxy that serves as the public instance (`this`)
   proxy: ComponentPublicInstance | null
 
+  // exposed properties via expose()
+  exposed: Record<string, any> | null
+
   /**
    * alternative proxy used only for runtime-compiled render functions using
    * `with` block
@@ -415,6 +420,7 @@ export function createComponentInstance(
     update: null!, // will be set synchronously right after creation
     render: null,
     proxy: null,
+    exposed: null,
     withProxy: null,
     effects: null,
     provides: parent ? parent.provides : Object.create(appContext.provides),
@@ -731,10 +737,20 @@ const attrHandlers: ProxyHandler<Data> = {
 }
 
 function createSetupContext(instance: ComponentInternalInstance): SetupContext {
+  const expose: SetupContext['expose'] = exposed => {
+    if (__DEV__ && instance.exposed) {
+      warn(`expose() should be called only once per setup().`)
+    }
+    instance.exposed = proxyRefs(exposed)
+  }
+
   if (__DEV__) {
     // We use getters in dev in case libs like test-utils overwrite instance
     // properties (overwrites should not be done in prod)
     return Object.freeze({
+      get props() {
+        return instance.props
+      },
       get attrs() {
         return new Proxy(instance.attrs, attrHandlers)
       },
@@ -743,13 +759,16 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
       },
       get emit() {
         return (event: string, ...args: any[]) => instance.emit(event, ...args)
-      }
+      },
+      expose
     })
   } else {
     return {
+      props: instance.props,
       attrs: instance.attrs,
       slots: instance.slots,
-      emit: instance.emit
+      emit: instance.emit,
+      expose
     }
   }
 }
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index ee4062ba8b9..dd95e29ad76 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -41,7 +41,9 @@ import {
   reactive,
   ComputedGetter,
   WritableComputedOptions,
-  toRaw
+  toRaw,
+  proxyRefs,
+  toRef
 } from '@vue/reactivity'
 import {
   ComponentObjectPropsOptions,
@@ -96,7 +98,7 @@ export interface ComponentOptionsBase<
   setup?: (
     this: void,
     props: Props,
-    ctx: SetupContext<E>
+    ctx: SetupContext<E, Props>
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node
@@ -110,6 +112,8 @@ export interface ComponentOptionsBase<
   directives?: Record<string, Directive>
   inheritAttrs?: boolean
   emits?: (E | EE[]) & ThisType<void>
+  // TODO infer public instance type based on exposed keys
+  expose?: string[]
   serverPrefetch?(): Promise<any>
 
   // Internal ------------------------------------------------------------------
@@ -461,7 +465,9 @@ export function applyOptions(
     render,
     renderTracked,
     renderTriggered,
-    errorCaptured
+    errorCaptured,
+    // public API
+    expose
   } = options
 
   const publicThis = instance.proxy!
@@ -736,6 +742,21 @@ export function applyOptions(
   if (unmounted) {
     onUnmounted(unmounted.bind(publicThis))
   }
+
+  if (isArray(expose)) {
+    if (!asMixin) {
+      if (expose.length) {
+        const exposed = instance.exposed || (instance.exposed = proxyRefs({}))
+        expose.forEach(key => {
+          exposed[key] = toRef(publicThis, key as any)
+        })
+      } else if (!instance.exposed) {
+        instance.exposed = EMPTY_OBJ
+      }
+    } else if (__DEV__) {
+      warn(`The \`expose\` option is ignored when used in mixins.`)
+    }
+  }
 }
 
 function callSyncHook(
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index 9c5ecaf5b68..bd8521415ff 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -95,6 +95,7 @@ export function renderComponentRoot(
               props,
               __DEV__
                 ? {
+                    props,
                     get attrs() {
                       markAttrsAccessed()
                       return attrs
@@ -102,7 +103,7 @@ export function renderComponentRoot(
                     slots,
                     emit
                   }
-                : { attrs, slots, emit }
+                : { props, attrs, slots, emit }
             )
           : render(props, null as any /* we know it doesn't need it */)
       )
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b711f8895e8..828850279ec 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -43,6 +43,7 @@ export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
+export { defineOptions } from './apiDefineOptions'
 
 // Advanced API ----------------------------------------------------------------
 
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index f0182c16f64..9c3b6eefe5a 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -306,12 +306,12 @@ export const setRef = (
     return
   }
 
-  let value: ComponentPublicInstance | RendererNode | null
+  let value: ComponentPublicInstance | RendererNode | Record<string, any> | null
   if (!vnode) {
     value = null
   } else {
     if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-      value = vnode.component!.proxy
+      value = vnode.component!.exposed || vnode.component!.proxy
     } else {
       value = vnode.el
     }
diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index b94bee722c5..3428aacebb1 100644
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -1,5 +1,6 @@
 import { h, reactive, createApp, ref } from 'vue'
 import { CompilerOptions } from '@vue/compiler-dom'
+import { BindingTypes } from '@vue/compiler-core'
 
 export const ssrMode = ref(false)
 
@@ -12,9 +13,9 @@ export const compilerOptions: CompilerOptions = reactive({
   scopeId: null,
   ssrCssVars: `{ color }`,
   bindingMetadata: {
-    TestComponent: 'setup',
-    foo: 'setup',
-    bar: 'props'
+    TestComponent: BindingTypes.SETUP,
+    foo: BindingTypes.SETUP,
+    bar: BindingTypes.PROPS
   }
 })
 
diff --git a/test-dts/defineOptions.test-d.ts b/test-dts/defineOptions.test-d.ts
new file mode 100644
index 00000000000..d1125db35df
--- /dev/null
+++ b/test-dts/defineOptions.test-d.ts
@@ -0,0 +1,96 @@
+import { expectType, defineOptions, Slots, describe } from './index'
+
+describe('no args', () => {
+  const { props, attrs, emit, slots } = defineOptions()
+  expectType<{}>(props)
+  expectType<Record<string, unknown>>(attrs)
+  expectType<(...args: any[]) => void>(emit)
+  expectType<Slots>(slots)
+
+  // @ts-expect-error
+  props.foo
+  // should be able to emit anything
+  emit('foo')
+  emit('bar')
+})
+
+describe('with type arg', () => {
+  const { props, attrs, emit, slots } = defineOptions<{
+    props: {
+      foo: string
+    }
+    emit: (e: 'change') => void
+  }>()
+
+  // explicitly declared type should be refined
+  expectType<string>(props.foo)
+  // @ts-expect-error
+  props.bar
+
+  emit('change')
+  // @ts-expect-error
+  emit()
+  // @ts-expect-error
+  emit('bar')
+
+  // non explicitly declared type should fallback to default type
+  expectType<Record<string, unknown>>(attrs)
+  expectType<Slots>(slots)
+})
+
+// with runtime arg
+describe('with runtime arg (array syntax)', () => {
+  const { props, emit } = defineOptions({
+    props: ['foo', 'bar'],
+    emits: ['foo', 'bar']
+  })
+
+  expectType<{
+    foo?: any
+    bar?: any
+  }>(props)
+  // @ts-expect-error
+  props.baz
+
+  emit('foo')
+  emit('bar', 123)
+  // @ts-expect-error
+  emit('baz')
+})
+
+describe('with runtime arg (object syntax)', () => {
+  const { props, emit } = defineOptions({
+    props: {
+      foo: String,
+      bar: {
+        type: Number,
+        default: 1
+      },
+      baz: {
+        type: Array,
+        required: true
+      }
+    },
+    emits: {
+      foo: () => {},
+      bar: null
+    }
+  })
+
+  expectType<{
+    foo?: string
+    bar: number
+    baz: unknown[]
+  }>(props)
+
+  props.foo && props.foo + 'bar'
+  props.bar + 1
+  // @ts-expect-error should be readonly
+  props.bar++
+  props.baz.push(1)
+
+  emit('foo')
+  emit('bar')
+  // @ts-expect-error
+  emit('baz')
+})
diff --git a/test-dts/tsconfig.build.json b/test-dts/tsconfig.build.json
index 6747eb10b1a..b41ea174794 100644
--- a/test-dts/tsconfig.build.json
+++ b/test-dts/tsconfig.build.json
@@ -7,7 +7,11 @@
       "vue": ["../packages/vue/dist"]
     }
   },
-  "exclude": ["../packages/*/__tests__", "../packages/*/src"],
+  "exclude": [
+    "../packages/*/__tests__",
+    "../packages/*/src",
+    "../packages/template-explorer"
+  ],
   "include": [
     "../packages/global.d.ts",
     "../packages/*/dist",
diff --git a/test-dts/tsconfig.json b/test-dts/tsconfig.json
index 01732c5e753..433de219a8e 100644
--- a/test-dts/tsconfig.json
+++ b/test-dts/tsconfig.json
@@ -4,5 +4,5 @@
     "noEmit": true,
     "declaration": true
   },
-  "exclude": ["../packages/*/__tests__"]
+  "exclude": ["../packages/*/__tests__", "../packages/template-explorer"]
 }