From 7292d70ff6fc03406b6da98f0fc9d000c5d01c38 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sun, 20 Jul 2025 19:29:36 +0800
Subject: [PATCH 1/9] fix(compiler-vapor): $props $emit $attrs $slots in prod

---
 packages/compiler-sfc/src/compileScript.ts  | 15 +++++++++++----
 packages/compiler-sfc/src/script/context.ts |  3 +++
 packages/compiler-vapor/src/generate.ts     |  4 ++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 54ca260bdd6..eedc9287d8e 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -817,7 +817,14 @@ export function compileScript(
   if (ctx.emitDecl) {
     destructureElements.push(`emit: __emit`)
   }
-  if (destructureElements.length) {
+
+  let destructureElementsDeclaration = ''
+  if (ctx.needToGetCtx) {
+    args += `, __ctx`
+    if (destructureElements.length) {
+      destructureElementsDeclaration = `  const { ${destructureElements.join(', ')} } = __ctx;\n`
+    }
+  } else if (destructureElements.length) {
     args += `, { ${destructureElements.join(', ')} }`
   }
 
@@ -994,7 +1001,7 @@ export function compileScript(
         vapor && !ssr ? `defineVaporComponent` : `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
-      }setup(${args}) {\n${exposeCall}`,
+      }setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
     )
     ctx.s.appendRight(endOffset, `})`)
   } else {
@@ -1010,14 +1017,14 @@ export function compileScript(
         `\n${genDefaultAs} /*@__PURE__*/Object.assign(${
           defaultExport ? `${normalScriptDefaultVar}, ` : ''
         }${definedOptions ? `${definedOptions}, ` : ''}{${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `})`)
     } else {
       ctx.s.prependLeft(
         startOffset,
         `\n${genDefaultAs} {${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `}`)
     }
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 47b6b442a49..199e198e03a 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -30,6 +30,9 @@ export class ScriptCompileContext {
   globalScopes?: TypeScope[]
   userImports: Record<string, ImportBinding> = Object.create(null)
 
+  // get the full ctx, currently used for Vapor's prod setup function
+  needToGetCtx = true
+
   // macros presence check
   hasDefinePropsCall = false
   hasDefineEmitCall = false
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 193a0f5da77..d2f4d69795b 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -123,6 +123,10 @@ export function generate(
   }
 
   push(INDENT_START)
+  if (bindingMetadata && inline) {
+    push(NEWLINE, `const $props = __props`)
+    push(NEWLINE, `const { emit: $emit, attrs: $attrs, slots: $slots } = __ctx`)
+  }
   if (ir.hasTemplateRef) {
     push(
       NEWLINE,

From 7c3730c3c749b429e8d833ad458237d3f4eaac3c Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 15:08:19 +0800
Subject: [PATCH 2/9] refactor: directly destructure in setup

---
 packages/compiler-sfc/src/compileScript.ts    |  58 ++++++++--
 packages/compiler-sfc/src/script/context.ts   |   3 -
 .../src/script/importUsageCheck.ts            | 104 ++++++++++++++++++
 packages/compiler-vapor/src/generate.ts       |   4 -
 4 files changed, 150 insertions(+), 19 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index eedc9287d8e..f71b1caf948 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -59,7 +59,10 @@ import { DEFINE_SLOTS, processDefineSlots } from './script/defineSlots'
 import { DEFINE_MODEL, processDefineModel } from './script/defineModel'
 import { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
-import { isImportUsed } from './script/importUsageCheck'
+import {
+  checkTemplateGlobalsUsage,
+  isImportUsed,
+} from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
 
 export interface SFCScriptCompileOptions {
@@ -181,6 +184,7 @@ export function compileScript(
   const scriptSetupLang = scriptSetup && scriptSetup.lang
   const vapor = sfc.vapor || options.vapor
   const ssr = options.templateOptions?.ssr
+  const setupPreambleLines = [] as string[]
 
   if (!scriptSetup) {
     if (!script) {
@@ -818,13 +822,39 @@ export function compileScript(
     destructureElements.push(`emit: __emit`)
   }
 
-  let destructureElementsDeclaration = ''
-  if (ctx.needToGetCtx) {
-    args += `, __ctx`
-    if (destructureElements.length) {
-      destructureElementsDeclaration = `  const { ${destructureElements.join(', ')} } = __ctx;\n`
+  // generate $props, $emit, $attrs, $slots
+  if (options.inlineTemplate) {
+    if (sfc.template && sfc.template.ast) {
+      const { usesProps, usesEmit, usesAttrs, usesSlots } =
+        checkTemplateGlobalsUsage(sfc)
+      // $props
+      if (usesProps && !('$props' in ctx.bindingMetadata)) {
+        setupPreambleLines.push(`const $props = __props`)
+        ctx.bindingMetadata['$props'] = BindingTypes.SETUP_REACTIVE_CONST
+      }
+      // $emit
+      if (usesEmit && !('$emit' in ctx.bindingMetadata)) {
+        if (ctx.emitDecl) {
+          setupPreambleLines.push(`const $emit = __emit`)
+        } else {
+          destructureElements.push('emit: $emit')
+        }
+        ctx.bindingMetadata['$emit'] = BindingTypes.SETUP_CONST
+      }
+      // $attrs
+      if (usesAttrs && !('$attrs' in ctx.bindingMetadata)) {
+        destructureElements.push('attrs: $attrs')
+        ctx.bindingMetadata['$attrs'] = BindingTypes.SETUP_REACTIVE_CONST
+      }
+      // $slots
+      if (usesSlots && !('$slots' in ctx.bindingMetadata)) {
+        destructureElements.push('slots: $slots')
+        ctx.bindingMetadata['$slots'] = BindingTypes.SETUP_REACTIVE_CONST
+      }
     }
-  } else if (destructureElements.length) {
+  }
+
+  if (destructureElements.length) {
     args += `, { ${destructureElements.join(', ')} }`
   }
 
@@ -983,8 +1013,12 @@ export function compileScript(
 
   // <script setup> components are closed by default. If the user did not
   // explicitly call `defineExpose`, call expose() with no args.
-  const exposeCall =
-    ctx.hasDefineExposeCall || options.inlineTemplate ? `` : `  __expose();\n`
+  if (!ctx.hasDefineExposeCall && !options.inlineTemplate)
+    setupPreambleLines.push(`__expose();`)
+
+  const setupPreamble = setupPreambleLines.length
+    ? '  ' + setupPreambleLines.join('\n  ')
+    : ''
   // wrap setup code with function.
   if (ctx.isTS) {
     // for TS, make sure the exported type is still valid type with
@@ -1001,7 +1035,7 @@ export function compileScript(
         vapor && !ssr ? `defineVaporComponent` : `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
-      }setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
+      }setup(${args}) {\n${setupPreamble}`,
     )
     ctx.s.appendRight(endOffset, `})`)
   } else {
@@ -1017,14 +1051,14 @@ export function compileScript(
         `\n${genDefaultAs} /*@__PURE__*/Object.assign(${
           defaultExport ? `${normalScriptDefaultVar}, ` : ''
         }${definedOptions ? `${definedOptions}, ` : ''}{${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${setupPreamble}`,
       )
       ctx.s.appendRight(endOffset, `})`)
     } else {
       ctx.s.prependLeft(
         startOffset,
         `\n${genDefaultAs} {${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${destructureElementsDeclaration}${exposeCall}`,
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${setupPreamble}`,
       )
       ctx.s.appendRight(endOffset, `}`)
     }
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 199e198e03a..47b6b442a49 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -30,9 +30,6 @@ export class ScriptCompileContext {
   globalScopes?: TypeScope[]
   userImports: Record<string, ImportBinding> = Object.create(null)
 
-  // get the full ctx, currently used for Vapor's prod setup function
-  needToGetCtx = true
-
   // macros presence check
   hasDefinePropsCall = false
   hasDefineEmitCall = false
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 22ef37cf37f..50539f99b39 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -92,3 +92,107 @@ function extractIdentifiers(ids: Set<string>, node: ExpressionNode) {
     ids.add((node as SimpleExpressionNode).content)
   }
 }
+
+interface TemplateGlobalsUsage {
+  usesAttrs: boolean
+  usesSlots: boolean
+  usesEmit: boolean
+  usesProps: boolean
+}
+
+/**
+ * Check which template globals ($attrs, $slots) are used in the SFC's template.
+ * Returns an object with boolean flags indicating usage.
+ */
+export function checkTemplateGlobalsUsage(
+  sfc: SFCDescriptor,
+): TemplateGlobalsUsage {
+  if (!sfc.template || !sfc.template.ast) {
+    return {
+      usesAttrs: false,
+      usesSlots: false,
+      usesEmit: false,
+      usesProps: false,
+    }
+  }
+
+  const { content, ast } = sfc.template
+  const cacheKey = `globals:${content}`
+  const cached = templateUsageCheckCache.get(cacheKey) as
+    | TemplateGlobalsUsage
+    | undefined
+  if (cached) {
+    return cached
+  }
+
+  const globals: TemplateGlobalsUsage = {
+    usesAttrs: false,
+    usesSlots: false,
+    usesEmit: false,
+    usesProps: false,
+  }
+  const targetIdentifiers = new Set(['$attrs', '$slots', '$emit', '$props'])
+
+  ast.children.forEach(walk)
+
+  function walk(node: TemplateChildNode) {
+    switch (node.type) {
+      case NodeTypes.ELEMENT:
+        for (let i = 0; i < node.props.length; i++) {
+          const prop = node.props[i]
+          if (prop.type === NodeTypes.DIRECTIVE) {
+            // process dynamic directive arguments
+            if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
+              extractTargetIdentifiers(prop.arg)
+            }
+
+            if (prop.name === 'for') {
+              extractTargetIdentifiers(prop.forParseResult!.source)
+            } else if (prop.exp) {
+              extractTargetIdentifiers(prop.exp)
+            }
+          }
+        }
+        node.children.forEach(walk)
+        break
+      case NodeTypes.INTERPOLATION:
+        extractTargetIdentifiers(node.content)
+        break
+    }
+  }
+
+  function extractTargetIdentifiers(node: ExpressionNode) {
+    const setGlobalFlag = (name: string) => {
+      switch (name) {
+        case '$attrs':
+          globals.usesAttrs = true
+          break
+        case '$slots':
+          globals.usesSlots = true
+          break
+        case '$emit':
+          globals.usesEmit = true
+          break
+        case '$props':
+          globals.usesProps = true
+          break
+      }
+    }
+
+    if (node.ast) {
+      walkIdentifiers(node.ast, n => {
+        if (targetIdentifiers.has(n.name)) {
+          setGlobalFlag(n.name)
+        }
+      })
+    } else if (node.ast === null) {
+      const content = (node as SimpleExpressionNode).content
+      if (targetIdentifiers.has(content)) {
+        setGlobalFlag(content)
+      }
+    }
+  }
+
+  templateUsageCheckCache.set(cacheKey, globals as any)
+  return globals
+}
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index d2f4d69795b..193a0f5da77 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -123,10 +123,6 @@ export function generate(
   }
 
   push(INDENT_START)
-  if (bindingMetadata && inline) {
-    push(NEWLINE, `const $props = __props`)
-    push(NEWLINE, `const { emit: $emit, attrs: $attrs, slots: $slots } = __ctx`)
-  }
   if (ir.hasTemplateRef) {
     push(
       NEWLINE,

From 1e0511ad5ddabc8eb7d32f1da2d10b2808cf128d Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 16:38:04 +0800
Subject: [PATCH 3/9] test: $xxx

---
 .../__snapshots__/compileScript.spec.ts.snap  | 222 ++++++++++++++++++
 .../__tests__/compileScript.spec.ts           | 145 ++++++++++++
 packages/compiler-sfc/src/compileScript.ts    |   2 +-
 3 files changed, 368 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 2acac64b0fb..67c89ee97a4 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -989,6 +989,228 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include all globals when they are used 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props, { emit: $emit, attrs: $attrs, slots: $slots }) {
+  const $props = __props
+/* ... */
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props) + _toDisplayString($slots) + _toDisplayString($emit) + _toDisplayString($attrs), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $attrs is used 1`] = `
+"import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props, { attrs: $attrs }) {
+/* ... */
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", _normalizeProps(_guardReactiveProps($attrs)), null, 16 /* FULL_PROPS */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $slots is used 1`] = `
+"import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
+
+
+export default {
+  setup(__props, { slots: $slots }) {
+/* ... */
+return (_ctx, _cache) => {
+  const _component_Comp = _resolveComponent("Comp")
+
+  return (_openBlock(), _createBlock(_component_Comp, {
+    foo: $slots.foo
+  }, null, 8 /* PROPS */, ["foo"]))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when $emit is used 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props, { emit: $emit }) {
+/* ... */
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
+  }))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when defineEmits is used 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+  const $emit = __emit
+
+            const emit = __emit
+          
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
+  }))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include props when $props is used 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+  const $props = __props
+/* ... */
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should not include globals when neither is used 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+/* ... */
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should handle mixed defineEmits and user-defined $emit 1`] = `
+"import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+
+              const emit = __emit
+              let $emit
+            
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => (_unref($emit)('click')))
+  }, "click"))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $attrs when user defines it 1`] = `
+"import { unref as _unref, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+let $attrs
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", _normalizeProps(_guardReactiveProps(_unref($attrs))), null, 16 /* FULL_PROPS */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $emit when user defines it 1`] = `
+"import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+let $emit
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => (_unref($emit)('click')))
+  }, "click"))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $slots when user defines it 1`] = `
+"import { unref as _unref, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+let $slots
+return (_ctx, _cache) => {
+  const _component_Comp = _resolveComponent("Comp")
+
+  return (_openBlock(), _createBlock(_component_Comp, {
+    foo: _unref($slots).foo
+  }, null, 8 /* PROPS */, ["foo"]))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not generate $props assignment when user defines it 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props) {
+let $props
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(_unref($props).msg), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should only destructure non-user-defined globals 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  setup(__props, { emit: $emit, slots: $slots }) {
+  const $props = __props
+let $attrs
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(_unref($attrs)) + _toDisplayString($slots) + _toDisplayString($emit) + _toDisplayString($props), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
 "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 134beff9668..00fa477ccc6 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -717,6 +717,151 @@ describe('SFC compile <script setup>', () => {
         consumer.originalPositionFor(getPositionInCode(content, 'Error')),
       ).toMatchObject(getPositionInCode(source, `Error`))
     })
+
+    describe('template globals destructuring based on usage', () => {
+      const theCompile = (template: string, setup = '/* ... */') =>
+        compile(
+          `<script setup>${setup}</script>\n<template>${template}</template>`,
+          { inlineTemplate: true },
+        )
+
+      test('should include attrs when $attrs is used', () => {
+        let { content } = theCompile('<div v-bind="$attrs"></div>')
+        expect(content).toMatch('setup(__props, { attrs: $attrs })')
+        expect(content).not.toMatch('slots: $slots')
+        expect(content).not.toMatch('emit: $emit')
+        expect(content).not.toMatch('const $props = __props')
+        assertCode(content)
+      })
+
+      test('should include attrs when $slots is used', () => {
+        let { content } = theCompile('<Comp :foo="$slots.foo"></Comp>')
+        expect(content).toMatch('setup(__props, { slots: $slots })')
+        assertCode(content)
+      })
+
+      test('should include props when $props is used', () => {
+        let { content } = theCompile('<div>{{ $props }}</div>')
+        expect(content).toMatch('setup(__props)')
+        expect(content).toMatch('const $props = __props')
+        assertCode(content)
+      })
+
+      test('should include emit when $emit is used', () => {
+        let { content } = theCompile(`<div @click="$emit('click')"></div>`)
+        expect(content).toMatch('setup(__props, { emit: $emit })')
+        expect(content).not.toMatch('const $emit = __emit')
+        assertCode(content)
+      })
+
+      // 当用户使用 defineEmits 的时候， $emit 需要改成 const $emit = __emit
+      test('should include emit when defineEmits is used', () => {
+        let { content } = compile(
+          `
+          <script setup>
+            const emit = defineEmits(['click'])
+          </script>
+          <template>
+            <div @click="$emit('click')"></div>
+          </template>
+        `,
+          { inlineTemplate: true },
+        )
+        expect(content).toMatch('setup(__props, { emit: __emit })')
+        expect(content).toMatch('const $emit = __emit')
+        expect(content).toMatch('const emit = __emit')
+        assertCode(content)
+      })
+
+      test('should include all globals when they are used', () => {
+        let { content } = theCompile(
+          '<div>{{ $props }}{{ $slots }}{{ $emit }}{{ $attrs }}</div>',
+        )
+        expect(content).toMatch(
+          'setup(__props, { emit: $emit, attrs: $attrs, slots: $slots })',
+        )
+        expect(content).toMatch('const $props = __props')
+        assertCode(content)
+      })
+
+      test('should not include globals when neither is used', () => {
+        let { content } = theCompile('<div>{{ msg }}</div>')
+        expect(content).toMatch('setup(__props)')
+        expect(content).not.toMatch('attrs: $attrs')
+        expect(content).not.toMatch('slots: $slots')
+        expect(content).not.toMatch('emit: $emit')
+        expect(content).not.toMatch('props: $props')
+        assertCode(content)
+      })
+
+      describe('user-defined globals override', () => {
+        test('should not destructure $attrs when user defines it', () => {
+          let { content } = theCompile(
+            '<div v-bind="$attrs"></div>',
+            'let $attrs',
+          )
+          expect(content).toMatch('setup(__props)')
+          expect(content).not.toMatch('attrs: $attrs')
+          assertCode(content)
+        })
+
+        test('should not destructure $slots when user defines it', () => {
+          let { content } = theCompile(
+            '<Comp :foo="$slots.foo"></Comp>',
+            'let $slots',
+          )
+          expect(content).toMatch('setup(__props)')
+          expect(content).not.toMatch('slots: $slots')
+          assertCode(content)
+        })
+
+        test('should not destructure $emit when user defines it', () => {
+          let { content } = theCompile(
+            `<div @click="$emit('click')">click</div>`,
+            'let $emit',
+          )
+          expect(content).toMatch('setup(__props)')
+          expect(content).not.toMatch('emit: $emit')
+          assertCode(content)
+        })
+
+        test('should not generate $props assignment when user defines it', () => {
+          let { content } = theCompile(
+            '<div>{{ $props.msg }}</div>',
+            'let $props',
+          )
+          expect(content).toMatch('setup(__props)')
+          expect(content).not.toMatch('const $props = __props')
+          assertCode(content)
+        })
+
+        test('should only destructure non-user-defined globals', () => {
+          let { content } = theCompile(
+            '<div>{{ $attrs }}{{ $slots }}{{ $emit }}{{ $props }}</div>',
+            'let $attrs',
+          )
+          expect(content).toMatch(
+            'setup(__props, { emit: $emit, slots: $slots })',
+          )
+          expect(content).not.toMatch('attrs: $attrs')
+          expect(content).toMatch('const $props = __props')
+          assertCode(content)
+        })
+
+        test('should handle mixed defineEmits and user-defined $emit', () => {
+          let { content } = theCompile(
+            `<div @click="$emit('click')">click</div>`,
+            `
+              const emit = defineEmits(['click'])
+              let $emit
+            `,
+          )
+          expect(content).toMatch('setup(__props, { emit: __emit })')
+          expect(content).toMatch('const emit = __emit')
+          assertCode(content)
+        })
+      })
+    })
   })
 
   describe('with TypeScript', () => {
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index f71b1caf948..601d4f12876 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1017,7 +1017,7 @@ export function compileScript(
     setupPreambleLines.push(`__expose();`)
 
   const setupPreamble = setupPreambleLines.length
-    ? '  ' + setupPreambleLines.join('\n  ')
+    ? `  ${setupPreambleLines.join('\n  ')}\n`
     : ''
   // wrap setup code with function.
   if (ctx.isTS) {

From 3ce03e09a5a17c59bc2b772c1325f89436714ab7 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 17:05:15 +0800
Subject: [PATCH 4/9] refactor: remove checkTemplateGlobalsUsage, use
 isImportUsed directly

---
 packages/compiler-sfc/src/compileScript.ts    |  15 +--
 .../src/script/importUsageCheck.ts            | 104 ------------------
 2 files changed, 5 insertions(+), 114 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 601d4f12876..a0e2ce24d0c 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -59,10 +59,7 @@ import { DEFINE_SLOTS, processDefineSlots } from './script/defineSlots'
 import { DEFINE_MODEL, processDefineModel } from './script/defineModel'
 import { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
-import {
-  checkTemplateGlobalsUsage,
-  isImportUsed,
-} from './script/importUsageCheck'
+import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
 
 export interface SFCScriptCompileOptions {
@@ -825,15 +822,13 @@ export function compileScript(
   // generate $props, $emit, $attrs, $slots
   if (options.inlineTemplate) {
     if (sfc.template && sfc.template.ast) {
-      const { usesProps, usesEmit, usesAttrs, usesSlots } =
-        checkTemplateGlobalsUsage(sfc)
       // $props
-      if (usesProps && !('$props' in ctx.bindingMetadata)) {
+      if (isImportUsed('$props', sfc) && !('$props' in ctx.bindingMetadata)) {
         setupPreambleLines.push(`const $props = __props`)
         ctx.bindingMetadata['$props'] = BindingTypes.SETUP_REACTIVE_CONST
       }
       // $emit
-      if (usesEmit && !('$emit' in ctx.bindingMetadata)) {
+      if (isImportUsed('$emit', sfc) && !('$emit' in ctx.bindingMetadata)) {
         if (ctx.emitDecl) {
           setupPreambleLines.push(`const $emit = __emit`)
         } else {
@@ -842,12 +837,12 @@ export function compileScript(
         ctx.bindingMetadata['$emit'] = BindingTypes.SETUP_CONST
       }
       // $attrs
-      if (usesAttrs && !('$attrs' in ctx.bindingMetadata)) {
+      if (isImportUsed('$attrs', sfc) && !('$attrs' in ctx.bindingMetadata)) {
         destructureElements.push('attrs: $attrs')
         ctx.bindingMetadata['$attrs'] = BindingTypes.SETUP_REACTIVE_CONST
       }
       // $slots
-      if (usesSlots && !('$slots' in ctx.bindingMetadata)) {
+      if (isImportUsed('$slots', sfc) && !('$slots' in ctx.bindingMetadata)) {
         destructureElements.push('slots: $slots')
         ctx.bindingMetadata['$slots'] = BindingTypes.SETUP_REACTIVE_CONST
       }
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 50539f99b39..22ef37cf37f 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -92,107 +92,3 @@ function extractIdentifiers(ids: Set<string>, node: ExpressionNode) {
     ids.add((node as SimpleExpressionNode).content)
   }
 }
-
-interface TemplateGlobalsUsage {
-  usesAttrs: boolean
-  usesSlots: boolean
-  usesEmit: boolean
-  usesProps: boolean
-}
-
-/**
- * Check which template globals ($attrs, $slots) are used in the SFC's template.
- * Returns an object with boolean flags indicating usage.
- */
-export function checkTemplateGlobalsUsage(
-  sfc: SFCDescriptor,
-): TemplateGlobalsUsage {
-  if (!sfc.template || !sfc.template.ast) {
-    return {
-      usesAttrs: false,
-      usesSlots: false,
-      usesEmit: false,
-      usesProps: false,
-    }
-  }
-
-  const { content, ast } = sfc.template
-  const cacheKey = `globals:${content}`
-  const cached = templateUsageCheckCache.get(cacheKey) as
-    | TemplateGlobalsUsage
-    | undefined
-  if (cached) {
-    return cached
-  }
-
-  const globals: TemplateGlobalsUsage = {
-    usesAttrs: false,
-    usesSlots: false,
-    usesEmit: false,
-    usesProps: false,
-  }
-  const targetIdentifiers = new Set(['$attrs', '$slots', '$emit', '$props'])
-
-  ast.children.forEach(walk)
-
-  function walk(node: TemplateChildNode) {
-    switch (node.type) {
-      case NodeTypes.ELEMENT:
-        for (let i = 0; i < node.props.length; i++) {
-          const prop = node.props[i]
-          if (prop.type === NodeTypes.DIRECTIVE) {
-            // process dynamic directive arguments
-            if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
-              extractTargetIdentifiers(prop.arg)
-            }
-
-            if (prop.name === 'for') {
-              extractTargetIdentifiers(prop.forParseResult!.source)
-            } else if (prop.exp) {
-              extractTargetIdentifiers(prop.exp)
-            }
-          }
-        }
-        node.children.forEach(walk)
-        break
-      case NodeTypes.INTERPOLATION:
-        extractTargetIdentifiers(node.content)
-        break
-    }
-  }
-
-  function extractTargetIdentifiers(node: ExpressionNode) {
-    const setGlobalFlag = (name: string) => {
-      switch (name) {
-        case '$attrs':
-          globals.usesAttrs = true
-          break
-        case '$slots':
-          globals.usesSlots = true
-          break
-        case '$emit':
-          globals.usesEmit = true
-          break
-        case '$props':
-          globals.usesProps = true
-          break
-      }
-    }
-
-    if (node.ast) {
-      walkIdentifiers(node.ast, n => {
-        if (targetIdentifiers.has(n.name)) {
-          setGlobalFlag(n.name)
-        }
-      })
-    } else if (node.ast === null) {
-      const content = (node as SimpleExpressionNode).content
-      if (targetIdentifiers.has(content)) {
-        setGlobalFlag(content)
-      }
-    }
-  }
-
-  templateUsageCheckCache.set(cacheKey, globals as any)
-  return globals
-}

From 7deed39753936fb609f65caa110fc776308848d0 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 17:07:17 +0800
Subject: [PATCH 5/9] chore: clean up code

---
 packages/compiler-sfc/__tests__/compileScript.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 00fa477ccc6..7e2a9ec7976 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -754,7 +754,6 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      // 当用户使用 defineEmits 的时候， $emit 需要改成 const $emit = __emit
       test('should include emit when defineEmits is used', () => {
         let { content } = compile(
           `

From 10de2aa1e78ab3c384677af590ee1e674443c40b Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 18:19:56 +0800
Subject: [PATCH 6/9] refactor: Rename the isImportUsed to isUsedInTemplate

---
 packages/compiler-sfc/src/compileScript.ts    | 40 ++++++++++++-------
 packages/compiler-sfc/src/parse.ts            |  4 +-
 .../src/script/importUsageCheck.ts            |  7 +++-
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index a0e2ce24d0c..4ad8282a181 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -59,7 +59,7 @@ import { DEFINE_SLOTS, processDefineSlots } from './script/defineSlots'
 import { DEFINE_MODEL, processDefineModel } from './script/defineModel'
 import { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
-import { isImportUsed } from './script/importUsageCheck'
+import { isUsedInTemplate } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
 
 export interface SFCScriptCompileOptions {
@@ -247,7 +247,15 @@ export function compileScript(
   ) {
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
-    let isUsedInTemplate = needTemplateUsageCheck
+    const theImport = {
+      isType,
+      imported,
+      local,
+      source,
+      isFromSetup,
+      isUsedInTemplate: needTemplateUsageCheck,
+    }
+
     if (
       needTemplateUsageCheck &&
       ctx.isTS &&
@@ -255,17 +263,10 @@ export function compileScript(
       !sfc.template.src &&
       !sfc.template.lang
     ) {
-      isUsedInTemplate = isImportUsed(local, sfc)
+      theImport.isUsedInTemplate = isUsedInTemplate(local, sfc)
     }
 
-    ctx.userImports[local] = {
-      isType,
-      imported,
-      local,
-      source,
-      isFromSetup,
-      isUsedInTemplate,
-    }
+    ctx.userImports[local] = theImport
   }
 
   function checkInvalidScopeReference(node: Node | undefined, method: string) {
@@ -823,12 +824,15 @@ export function compileScript(
   if (options.inlineTemplate) {
     if (sfc.template && sfc.template.ast) {
       // $props
-      if (isImportUsed('$props', sfc) && !('$props' in ctx.bindingMetadata)) {
+      if (
+        isUsedInTemplate('$props', sfc) &&
+        !('$props' in ctx.bindingMetadata)
+      ) {
         setupPreambleLines.push(`const $props = __props`)
         ctx.bindingMetadata['$props'] = BindingTypes.SETUP_REACTIVE_CONST
       }
       // $emit
-      if (isImportUsed('$emit', sfc) && !('$emit' in ctx.bindingMetadata)) {
+      if (isUsedInTemplate('$emit', sfc) && !('$emit' in ctx.bindingMetadata)) {
         if (ctx.emitDecl) {
           setupPreambleLines.push(`const $emit = __emit`)
         } else {
@@ -837,12 +841,18 @@ export function compileScript(
         ctx.bindingMetadata['$emit'] = BindingTypes.SETUP_CONST
       }
       // $attrs
-      if (isImportUsed('$attrs', sfc) && !('$attrs' in ctx.bindingMetadata)) {
+      if (
+        isUsedInTemplate('$attrs', sfc) &&
+        !('$attrs' in ctx.bindingMetadata)
+      ) {
         destructureElements.push('attrs: $attrs')
         ctx.bindingMetadata['$attrs'] = BindingTypes.SETUP_REACTIVE_CONST
       }
       // $slots
-      if (isImportUsed('$slots', sfc) && !('$slots' in ctx.bindingMetadata)) {
+      if (
+        isUsedInTemplate('$slots', sfc) &&
+        !('$slots' in ctx.bindingMetadata)
+      ) {
         destructureElements.push('slots: $slots')
         ctx.bindingMetadata['$slots'] = BindingTypes.SETUP_REACTIVE_CONST
       }
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 01d0794e0d8..9172cfc67ff 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -16,7 +16,7 @@ import type { TemplateCompiler } from './compileTemplate'
 import { parseCssVars } from './style/cssVars'
 import { createCache } from './cache'
 import type { ImportBinding } from './compileScript'
-import { isImportUsed } from './script/importUsageCheck'
+import { isUsedInTemplate } from './script/importUsageCheck'
 import type { LRUCache } from 'lru-cache'
 import { genCacheKey } from '@vue/shared'
 
@@ -449,7 +449,7 @@ export function hmrShouldReload(
   for (const key in prevImports) {
     // if an import was previous unused, but now is used, we need to force
     // reload so that the script now includes that import.
-    if (!prevImports[key].isUsedInTemplate && isImportUsed(key, next)) {
+    if (!prevImports[key].isUsedInTemplate && isUsedInTemplate(key, next)) {
       return true
     }
   }
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 22ef37cf37f..dd690887c43 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -15,8 +15,11 @@ import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
  * the properties that should be included in the object returned from setup()
  * when not using inline mode.
  */
-export function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
-  return resolveTemplateUsedIdentifiers(sfc).has(local)
+export function isUsedInTemplate(
+  identifier: string,
+  sfc: SFCDescriptor,
+): boolean {
+  return resolveTemplateUsedIdentifiers(sfc).has(identifier)
 }
 
 const templateUsageCheckCache = createCache<Set<string>>()

From f1b3d24bf4ae59fd1ed4e9ac8955a0085a304e91 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 21 Jul 2025 18:28:23 +0800
Subject: [PATCH 7/9] chore: change comments

---
 packages/compiler-sfc/src/script/importUsageCheck.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index dd690887c43..ff15ed23d5a 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -11,9 +11,7 @@ import { createCache } from '../cache'
 import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
 
 /**
- * Check if an import is used in the SFC's template. This is used to determine
- * the properties that should be included in the object returned from setup()
- * when not using inline mode.
+ * Check if an identifier is used in the SFC's template.
  */
 export function isUsedInTemplate(
   identifier: string,

From 4bf546f3b4cc782bc92919c9eb0cd2304e0d6cd8 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 22 Jul 2025 11:49:42 +0800
Subject: [PATCH 8/9] chore: minor tweaks

---
 .../__snapshots__/compileScript.spec.ts.snap  | 398 +++++++++---------
 .../__tests__/compileScript.spec.ts           |  23 +-
 packages/compiler-sfc/src/compileScript.ts    | 113 +++--
 .../src/script/importUsageCheck.ts            |   3 +
 4 files changed, 268 insertions(+), 269 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 67c89ee97a4..9b329a8e6f1 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -823,173 +823,44 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-import ChildComp from './Child.vue'
-        import SomeOtherComp from './Other.vue'
-        import vMyDir from './my-dir'
-        
-export default {
-  setup(__props) {
-
-        
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
-      [_unref(vMyDir)]
-    ]),
-    _createVNode(ChildComp),
-    _createVNode(SomeOtherComp)
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should alias $props to __props when $props is used 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-import { ref } from 'vue'
-        
 export default {
   setup(__props) {
-
-        const count = ref(0)
-        
+  const $props = __props
+/* ... */
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
-    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* CACHED */))
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
-"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
-
-import { ref } from 'vue'
-        
-export default {
-  __ssrInlineRender: true,
-  setup(__props) {
-
-        const count = ref(0)
-        const style = { color: 'red' }
-        const height = ref(0)
-        
-return (_ctx, _push, _parent, _attrs) => {
-  const _cssVars = { style: {
-  ":--xxxxxxxx-count": (count.value),
-  ":--xxxxxxxx-style\\\\.color": (style.color),
-  ":--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
-}}
-  _push(\`<!--[--><div\${
-    _ssrRenderAttrs(_cssVars)
-  }>\${
-    _ssrInterpolate(count.value)
-  }</div><div\${
-    _ssrRenderAttrs(_cssVars)
-  }>static</div><!--]-->\`)
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props), 1 /* TEXT */))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-import { ref } from 'vue'
-        
-export default {
-  setup(__props) {
-
-        const count = ref(0)
-        const maybe = foo()
-        let lett = 1
-        let v = ref(1)
-        
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
-      onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[5] || (_cache[5] = () => {
-              let a = '' + _unref(lett)
-              _isRef(v) ? v.value = a : v = a
-           })
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[6] || (_cache[6] = () => {
-              // nested scopes
-              (()=>{
-                let x = _ctx.a
-                (()=>{
-                  let z = x
-                  let z2 = z
-                })
-                let lz = _ctx.z
-              })
-              _isRef(v) ? v.value = _ctx.a : v = _ctx.a
-           })
-    })
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should alias __emit to $emit when defineEmits is used 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-import { ref } from 'vue'
-        
 export default {
-  setup(__props) {
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+  const $emit = __emit
 
-        const val = {}
-        const count = ref(0)
-        const maybe = foo()
-        let lett = 1
-        
+            const emit = __emit
+          
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
-      onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
-    })
-  ], 64 /* STABLE_FRAGMENT */))
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
+  }))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include all globals when they are used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure all built-in properties when they are used 1`] = `
 "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1005,7 +876,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $attrs is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure attrs when $attrs is used 1`] = `
 "import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1020,26 +891,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $slots is used 1`] = `
-"import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
-
-
-export default {
-  setup(__props, { slots: $slots }) {
-/* ... */
-return (_ctx, _cache) => {
-  const _component_Comp = _resolveComponent("Comp")
-
-  return (_openBlock(), _createBlock(_component_Comp, {
-    foo: $slots.foo
-  }, null, 8 /* PROPS */, ["foo"]))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when $emit is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure emit when $emit is used 1`] = `
 "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1056,44 +908,26 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when defineEmits is used 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-
-export default {
-  emits: ['click'],
-  setup(__props, { emit: __emit }) {
-  const $emit = __emit
-
-            const emit = __emit
-          
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", {
-    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
-  }))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include props when $props is used 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure slots when $slots is used 1`] = `
+"import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 
 export default {
-  setup(__props) {
-  const $props = __props
+  setup(__props, { slots: $slots }) {
 /* ... */
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props), 1 /* TEXT */))
+  const _component_Comp = _resolveComponent("Comp")
+
+  return (_openBlock(), _createBlock(_component_Comp, {
+    foo: $slots.foo
+  }, null, 8 /* PROPS */, ["foo"]))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should not include globals when neither is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should not destructure built-in properties when neither is used 1`] = `
 "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1108,7 +942,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should handle mixed defineEmits and user-defined $emit 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should handle mixed defineEmits and user-defined $emit 1`] = `
 "import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1129,7 +963,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $attrs when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $attrs when user defines it 1`] = `
 "import { unref as _unref, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1144,7 +978,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $emit when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $emit when user defines it 1`] = `
 "import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1161,7 +995,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $slots when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $slots when user defines it 1`] = `
 "import { unref as _unref, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 
@@ -1180,7 +1014,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not generate $props assignment when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not generate $props alias when user defines it 1`] = `
 "import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1195,7 +1029,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should only destructure non-user-defined globals 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should only destructure non-user-defined properties 1`] = `
 "import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1211,6 +1045,172 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import ChildComp from './Child.vue'
+        import SomeOtherComp from './Other.vue'
+        import vMyDir from './my-dir'
+        
+export default {
+  setup(__props) {
+
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
+      [_unref(vMyDir)]
+    ]),
+    _createVNode(ChildComp),
+    _createVNode(SomeOtherComp)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const count = ref(0)
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
+    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* CACHED */))
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
+
+import { ref } from 'vue'
+        
+export default {
+  __ssrInlineRender: true,
+  setup(__props) {
+
+        const count = ref(0)
+        const style = { color: 'red' }
+        const height = ref(0)
+        
+return (_ctx, _push, _parent, _attrs) => {
+  const _cssVars = { style: {
+  ":--xxxxxxxx-count": (count.value),
+  ":--xxxxxxxx-style\\\\.color": (style.color),
+  ":--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
+}}
+  _push(\`<!--[--><div\${
+    _ssrRenderAttrs(_cssVars)
+  }>\${
+    _ssrInterpolate(count.value)
+  }</div><div\${
+    _ssrRenderAttrs(_cssVars)
+  }>static</div><!--]-->\`)
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const count = ref(0)
+        const maybe = foo()
+        let lett = 1
+        let v = ref(1)
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[5] || (_cache[5] = () => {
+              let a = '' + _unref(lett)
+              _isRef(v) ? v.value = a : v = a
+           })
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[6] || (_cache[6] = () => {
+              // nested scopes
+              (()=>{
+                let x = _ctx.a
+                (()=>{
+                  let z = x
+                  let z2 = z
+                })
+                let lz = _ctx.z
+              })
+              _isRef(v) ? v.value = _ctx.a : v = _ctx.a
+           })
+    })
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const val = {}
+        const count = ref(0)
+        const maybe = foo()
+        let lett = 1
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
+    })
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
 "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 7e2a9ec7976..0fda15bfe40 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -718,14 +718,14 @@ describe('SFC compile <script setup>', () => {
       ).toMatchObject(getPositionInCode(source, `Error`))
     })
 
-    describe('template globals destructuring based on usage', () => {
+    describe('destructuring component instance for built-in properties', () => {
       const theCompile = (template: string, setup = '/* ... */') =>
         compile(
           `<script setup>${setup}</script>\n<template>${template}</template>`,
           { inlineTemplate: true },
         )
 
-      test('should include attrs when $attrs is used', () => {
+      test('should destructure attrs when $attrs is used', () => {
         let { content } = theCompile('<div v-bind="$attrs"></div>')
         expect(content).toMatch('setup(__props, { attrs: $attrs })')
         expect(content).not.toMatch('slots: $slots')
@@ -734,27 +734,27 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should include attrs when $slots is used', () => {
+      test('should destructure slots when $slots is used', () => {
         let { content } = theCompile('<Comp :foo="$slots.foo"></Comp>')
         expect(content).toMatch('setup(__props, { slots: $slots })')
         assertCode(content)
       })
 
-      test('should include props when $props is used', () => {
+      test('should alias $props to __props when $props is used', () => {
         let { content } = theCompile('<div>{{ $props }}</div>')
         expect(content).toMatch('setup(__props)')
         expect(content).toMatch('const $props = __props')
         assertCode(content)
       })
 
-      test('should include emit when $emit is used', () => {
+      test('should destructure emit when $emit is used', () => {
         let { content } = theCompile(`<div @click="$emit('click')"></div>`)
         expect(content).toMatch('setup(__props, { emit: $emit })')
         expect(content).not.toMatch('const $emit = __emit')
         assertCode(content)
       })
 
-      test('should include emit when defineEmits is used', () => {
+      test('should alias __emit to $emit when defineEmits is used', () => {
         let { content } = compile(
           `
           <script setup>
@@ -772,7 +772,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should include all globals when they are used', () => {
+      test('should destructure all built-in properties when they are used', () => {
         let { content } = theCompile(
           '<div>{{ $props }}{{ $slots }}{{ $emit }}{{ $attrs }}</div>',
         )
@@ -783,7 +783,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should not include globals when neither is used', () => {
+      test('should not destructure built-in properties when neither is used', () => {
         let { content } = theCompile('<div>{{ msg }}</div>')
         expect(content).toMatch('setup(__props)')
         expect(content).not.toMatch('attrs: $attrs')
@@ -793,7 +793,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      describe('user-defined globals override', () => {
+      describe('user-defined properties override', () => {
         test('should not destructure $attrs when user defines it', () => {
           let { content } = theCompile(
             '<div v-bind="$attrs"></div>',
@@ -824,7 +824,7 @@ describe('SFC compile <script setup>', () => {
           assertCode(content)
         })
 
-        test('should not generate $props assignment when user defines it', () => {
+        test('should not generate $props alias when user defines it', () => {
           let { content } = theCompile(
             '<div>{{ $props.msg }}</div>',
             'let $props',
@@ -834,7 +834,7 @@ describe('SFC compile <script setup>', () => {
           assertCode(content)
         })
 
-        test('should only destructure non-user-defined globals', () => {
+        test('should only destructure non-user-defined properties', () => {
           let { content } = theCompile(
             '<div>{{ $attrs }}{{ $slots }}{{ $emit }}{{ $props }}</div>',
             'let $attrs',
@@ -857,6 +857,7 @@ describe('SFC compile <script setup>', () => {
           )
           expect(content).toMatch('setup(__props, { emit: __emit })')
           expect(content).toMatch('const emit = __emit')
+          expect(content).not.toMatch('const $emit = __emit')
           assertCode(content)
         })
       })
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 4ad8282a181..9bcfe07080d 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -247,15 +247,7 @@ export function compileScript(
   ) {
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
-    const theImport = {
-      isType,
-      imported,
-      local,
-      source,
-      isFromSetup,
-      isUsedInTemplate: needTemplateUsageCheck,
-    }
-
+    let isImportUsed = needTemplateUsageCheck
     if (
       needTemplateUsageCheck &&
       ctx.isTS &&
@@ -263,10 +255,17 @@ export function compileScript(
       !sfc.template.src &&
       !sfc.template.lang
     ) {
-      theImport.isUsedInTemplate = isUsedInTemplate(local, sfc)
+      isImportUsed = isUsedInTemplate(local, sfc)
     }
 
-    ctx.userImports[local] = theImport
+    ctx.userImports[local] = {
+      isType,
+      imported,
+      local,
+      source,
+      isFromSetup,
+      isUsedInTemplate: isImportUsed,
+    }
   }
 
   function checkInvalidScopeReference(node: Node | undefined, method: string) {
@@ -286,8 +285,42 @@ export function compileScript(
     })
   }
 
+  function buildDestructureElements() {
+    if (!sfc.template || !sfc.template.ast) return
+
+    const builtins = {
+      $props: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => setupPreambleLines.push(`const $props = __props`),
+      },
+      $emit: {
+        bindingType: BindingTypes.SETUP_CONST,
+        setup: () =>
+          ctx.emitDecl
+            ? setupPreambleLines.push(`const $emit = __emit`)
+            : destructureElements.push('emit: $emit'),
+      },
+      $attrs: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => destructureElements.push('attrs: $attrs'),
+      },
+      $slots: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => destructureElements.push('slots: $slots'),
+      },
+    }
+
+    for (const [name, config] of Object.entries(builtins)) {
+      if (isUsedInTemplate(name, sfc) && !ctx.bindingMetadata[name]) {
+        config.setup()
+        ctx.bindingMetadata[name] = config.bindingType
+      }
+    }
+  }
+
   const scriptAst = ctx.scriptAst
   const scriptSetupAst = ctx.scriptSetupAst!
+  const inlineMode = options.inlineTemplate
 
   // 1.1 walk import declarations of <script>
   if (scriptAst) {
@@ -304,7 +337,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             false,
-            !options.inlineTemplate,
+            !inlineMode,
           )
         }
       }
@@ -372,7 +405,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             true,
-            !options.inlineTemplate,
+            !inlineMode,
           )
         }
       }
@@ -813,50 +846,15 @@ export function compileScript(
   }
 
   const destructureElements =
-    ctx.hasDefineExposeCall || !options.inlineTemplate
-      ? [`expose: __expose`]
-      : []
+    ctx.hasDefineExposeCall || !inlineMode ? [`expose: __expose`] : []
   if (ctx.emitDecl) {
     destructureElements.push(`emit: __emit`)
   }
 
-  // generate $props, $emit, $attrs, $slots
-  if (options.inlineTemplate) {
-    if (sfc.template && sfc.template.ast) {
-      // $props
-      if (
-        isUsedInTemplate('$props', sfc) &&
-        !('$props' in ctx.bindingMetadata)
-      ) {
-        setupPreambleLines.push(`const $props = __props`)
-        ctx.bindingMetadata['$props'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-      // $emit
-      if (isUsedInTemplate('$emit', sfc) && !('$emit' in ctx.bindingMetadata)) {
-        if (ctx.emitDecl) {
-          setupPreambleLines.push(`const $emit = __emit`)
-        } else {
-          destructureElements.push('emit: $emit')
-        }
-        ctx.bindingMetadata['$emit'] = BindingTypes.SETUP_CONST
-      }
-      // $attrs
-      if (
-        isUsedInTemplate('$attrs', sfc) &&
-        !('$attrs' in ctx.bindingMetadata)
-      ) {
-        destructureElements.push('attrs: $attrs')
-        ctx.bindingMetadata['$attrs'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-      // $slots
-      if (
-        isUsedInTemplate('$slots', sfc) &&
-        !('$slots' in ctx.bindingMetadata)
-      ) {
-        destructureElements.push('slots: $slots')
-        ctx.bindingMetadata['$slots'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-    }
+  // generate built-in properties (e.g. $emit, $attrs, $slots) on
+  // the component public instance used in template
+  if (inlineMode) {
+    buildDestructureElements()
   }
 
   if (destructureElements.length) {
@@ -866,10 +864,7 @@ export function compileScript(
   let templateMap
   // 9. generate return statement
   let returned
-  if (
-    !options.inlineTemplate ||
-    (!sfc.template && ctx.hasDefaultExportRender)
-  ) {
+  if (!inlineMode || (!sfc.template && ctx.hasDefaultExportRender)) {
     // non-inline mode, or has manual render in normal <script>
     // return bindings from script and script setup
     const allBindings: Record<string, any> = {
@@ -969,7 +964,7 @@ export function compileScript(
     }
   }
 
-  if (!options.inlineTemplate && !__TEST__) {
+  if (!inlineMode && !__TEST__) {
     // in non-inline mode, the `__isScriptSetup: true` flag is used by
     // componentPublicInstance proxy to allow properties that start with $ or _
     ctx.s.appendRight(
@@ -1018,7 +1013,7 @@ export function compileScript(
 
   // <script setup> components are closed by default. If the user did not
   // explicitly call `defineExpose`, call expose() with no args.
-  if (!ctx.hasDefineExposeCall && !options.inlineTemplate)
+  if (!ctx.hasDefineExposeCall && !inlineMode)
     setupPreambleLines.push(`__expose();`)
 
   const setupPreamble = setupPreambleLines.length
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index ff15ed23d5a..6fc16db446b 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -12,6 +12,9 @@ import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
 
 /**
  * Check if an identifier is used in the SFC's template.
+ * - 1.used to determine the properties that should be included in the object returned from setup()
+ *   when not using inline mode.
+ * - 2.check whether the built-in properties such as $attrs, $slots, $emit are used in the template
  */
 export function isUsedInTemplate(
   identifier: string,

From 4b1a872eb3d1c6c76a9a5ab9da16c2f13e25fdd3 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 22 Jul 2025 11:49:42 +0800
Subject: [PATCH 9/9] chore: minor tweaks

---
 .../__snapshots__/compileScript.spec.ts.snap  | 398 +++++++++---------
 .../__tests__/compileScript.spec.ts           |  23 +-
 packages/compiler-sfc/src/compileScript.ts    | 112 +++--
 .../src/script/importUsageCheck.ts            |   3 +
 4 files changed, 267 insertions(+), 269 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 67c89ee97a4..9b329a8e6f1 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -823,173 +823,44 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-import ChildComp from './Child.vue'
-        import SomeOtherComp from './Other.vue'
-        import vMyDir from './my-dir'
-        
-export default {
-  setup(__props) {
-
-        
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
-      [_unref(vMyDir)]
-    ]),
-    _createVNode(ChildComp),
-    _createVNode(SomeOtherComp)
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should alias $props to __props when $props is used 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-import { ref } from 'vue'
-        
 export default {
   setup(__props) {
-
-        const count = ref(0)
-        
+  const $props = __props
+/* ... */
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
-    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* CACHED */))
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
-"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
-
-import { ref } from 'vue'
-        
-export default {
-  __ssrInlineRender: true,
-  setup(__props) {
-
-        const count = ref(0)
-        const style = { color: 'red' }
-        const height = ref(0)
-        
-return (_ctx, _push, _parent, _attrs) => {
-  const _cssVars = { style: {
-  ":--xxxxxxxx-count": (count.value),
-  ":--xxxxxxxx-style\\\\.color": (style.color),
-  ":--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
-}}
-  _push(\`<!--[--><div\${
-    _ssrRenderAttrs(_cssVars)
-  }>\${
-    _ssrInterpolate(count.value)
-  }</div><div\${
-    _ssrRenderAttrs(_cssVars)
-  }>static</div><!--]-->\`)
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props), 1 /* TEXT */))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-import { ref } from 'vue'
-        
-export default {
-  setup(__props) {
-
-        const count = ref(0)
-        const maybe = foo()
-        let lett = 1
-        let v = ref(1)
-        
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
-      onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[5] || (_cache[5] = () => {
-              let a = '' + _unref(lett)
-              _isRef(v) ? v.value = a : v = a
-           })
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[6] || (_cache[6] = () => {
-              // nested scopes
-              (()=>{
-                let x = _ctx.a
-                (()=>{
-                  let z = x
-                  let z2 = z
-                })
-                let lz = _ctx.z
-              })
-              _isRef(v) ? v.value = _ctx.a : v = _ctx.a
-           })
-    })
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-}"
-`;
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should alias __emit to $emit when defineEmits is used 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-import { ref } from 'vue'
-        
 export default {
-  setup(__props) {
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+  const $emit = __emit
 
-        const val = {}
-        const count = ref(0)
-        const maybe = foo()
-        let lett = 1
-        
+            const emit = __emit
+          
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
-      onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
-    }),
-    _createElementVNode("div", {
-      onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
-    })
-  ], 64 /* STABLE_FRAGMENT */))
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
+  }))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include all globals when they are used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure all built-in properties when they are used 1`] = `
 "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1005,7 +876,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $attrs is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure attrs when $attrs is used 1`] = `
 "import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1020,26 +891,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include attrs when $slots is used 1`] = `
-"import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
-
-
-export default {
-  setup(__props, { slots: $slots }) {
-/* ... */
-return (_ctx, _cache) => {
-  const _component_Comp = _resolveComponent("Comp")
-
-  return (_openBlock(), _createBlock(_component_Comp, {
-    foo: $slots.foo
-  }, null, 8 /* PROPS */, ["foo"]))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when $emit is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure emit when $emit is used 1`] = `
 "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1056,44 +908,26 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include emit when defineEmits is used 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-
-export default {
-  emits: ['click'],
-  setup(__props, { emit: __emit }) {
-  const $emit = __emit
-
-            const emit = __emit
-          
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", {
-    onClick: _cache[0] || (_cache[0] = $event => ($emit('click')))
-  }))
-}
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should include props when $props is used 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should destructure slots when $slots is used 1`] = `
+"import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 
 export default {
-  setup(__props) {
-  const $props = __props
+  setup(__props, { slots: $slots }) {
 /* ... */
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props), 1 /* TEXT */))
+  const _component_Comp = _resolveComponent("Comp")
+
+  return (_openBlock(), _createBlock(_component_Comp, {
+    foo: $slots.foo
+  }, null, 8 /* PROPS */, ["foo"]))
 }
 }
 
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > should not include globals when neither is used 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > should not destructure built-in properties when neither is used 1`] = `
 "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1108,7 +942,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should handle mixed defineEmits and user-defined $emit 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should handle mixed defineEmits and user-defined $emit 1`] = `
 "import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1129,7 +963,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $attrs when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $attrs when user defines it 1`] = `
 "import { unref as _unref, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1144,7 +978,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $emit when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $emit when user defines it 1`] = `
 "import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1161,7 +995,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not destructure $slots when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not destructure $slots when user defines it 1`] = `
 "import { unref as _unref, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 
@@ -1180,7 +1014,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should not generate $props assignment when user defines it 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should not generate $props alias when user defines it 1`] = `
 "import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1195,7 +1029,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> > inlineTemplate mode > template globals destructuring based on usage > user-defined globals override > should only destructure non-user-defined globals 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > destructuring component instance for built-in properties > user-defined properties override > should only destructure non-user-defined properties 1`] = `
 "import { unref as _unref, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
@@ -1211,6 +1045,172 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import ChildComp from './Child.vue'
+        import SomeOtherComp from './Other.vue'
+        import vMyDir from './my-dir'
+        
+export default {
+  setup(__props) {
+
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
+      [_unref(vMyDir)]
+    ]),
+    _createVNode(ChildComp),
+    _createVNode(SomeOtherComp)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const count = ref(0)
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
+    _cache[0] || (_cache[0] = _createElementVNode("div", null, "static", -1 /* CACHED */))
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
+
+import { ref } from 'vue'
+        
+export default {
+  __ssrInlineRender: true,
+  setup(__props) {
+
+        const count = ref(0)
+        const style = { color: 'red' }
+        const height = ref(0)
+        
+return (_ctx, _push, _parent, _attrs) => {
+  const _cssVars = { style: {
+  ":--xxxxxxxx-count": (count.value),
+  ":--xxxxxxxx-style\\\\.color": (style.color),
+  ":--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
+}}
+  _push(\`<!--[--><div\${
+    _ssrRenderAttrs(_cssVars)
+  }>\${
+    _ssrInterpolate(count.value)
+  }</div><div\${
+    _ssrRenderAttrs(_cssVars)
+  }>static</div><!--]-->\`)
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const count = ref(0)
+        const maybe = foo()
+        let lett = 1
+        let v = ref(1)
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[5] || (_cache[5] = () => {
+              let a = '' + _unref(lett)
+              _isRef(v) ? v.value = a : v = a
+           })
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[6] || (_cache[6] = () => {
+              // nested scopes
+              (()=>{
+                let x = _ctx.a
+                (()=>{
+                  let z = x
+                  let z2 = z
+                })
+                let lz = _ctx.z
+              })
+              _isRef(v) ? v.value = _ctx.a : v = _ctx.a
+           })
+    })
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import { ref } from 'vue'
+        
+export default {
+  setup(__props) {
+
+        const val = {}
+        const count = ref(0)
+        const maybe = foo()
+        let lett = 1
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
+    }),
+    _createElementVNode("div", {
+      onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
+    })
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
 "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 7e2a9ec7976..0fda15bfe40 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -718,14 +718,14 @@ describe('SFC compile <script setup>', () => {
       ).toMatchObject(getPositionInCode(source, `Error`))
     })
 
-    describe('template globals destructuring based on usage', () => {
+    describe('destructuring component instance for built-in properties', () => {
       const theCompile = (template: string, setup = '/* ... */') =>
         compile(
           `<script setup>${setup}</script>\n<template>${template}</template>`,
           { inlineTemplate: true },
         )
 
-      test('should include attrs when $attrs is used', () => {
+      test('should destructure attrs when $attrs is used', () => {
         let { content } = theCompile('<div v-bind="$attrs"></div>')
         expect(content).toMatch('setup(__props, { attrs: $attrs })')
         expect(content).not.toMatch('slots: $slots')
@@ -734,27 +734,27 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should include attrs when $slots is used', () => {
+      test('should destructure slots when $slots is used', () => {
         let { content } = theCompile('<Comp :foo="$slots.foo"></Comp>')
         expect(content).toMatch('setup(__props, { slots: $slots })')
         assertCode(content)
       })
 
-      test('should include props when $props is used', () => {
+      test('should alias $props to __props when $props is used', () => {
         let { content } = theCompile('<div>{{ $props }}</div>')
         expect(content).toMatch('setup(__props)')
         expect(content).toMatch('const $props = __props')
         assertCode(content)
       })
 
-      test('should include emit when $emit is used', () => {
+      test('should destructure emit when $emit is used', () => {
         let { content } = theCompile(`<div @click="$emit('click')"></div>`)
         expect(content).toMatch('setup(__props, { emit: $emit })')
         expect(content).not.toMatch('const $emit = __emit')
         assertCode(content)
       })
 
-      test('should include emit when defineEmits is used', () => {
+      test('should alias __emit to $emit when defineEmits is used', () => {
         let { content } = compile(
           `
           <script setup>
@@ -772,7 +772,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should include all globals when they are used', () => {
+      test('should destructure all built-in properties when they are used', () => {
         let { content } = theCompile(
           '<div>{{ $props }}{{ $slots }}{{ $emit }}{{ $attrs }}</div>',
         )
@@ -783,7 +783,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      test('should not include globals when neither is used', () => {
+      test('should not destructure built-in properties when neither is used', () => {
         let { content } = theCompile('<div>{{ msg }}</div>')
         expect(content).toMatch('setup(__props)')
         expect(content).not.toMatch('attrs: $attrs')
@@ -793,7 +793,7 @@ describe('SFC compile <script setup>', () => {
         assertCode(content)
       })
 
-      describe('user-defined globals override', () => {
+      describe('user-defined properties override', () => {
         test('should not destructure $attrs when user defines it', () => {
           let { content } = theCompile(
             '<div v-bind="$attrs"></div>',
@@ -824,7 +824,7 @@ describe('SFC compile <script setup>', () => {
           assertCode(content)
         })
 
-        test('should not generate $props assignment when user defines it', () => {
+        test('should not generate $props alias when user defines it', () => {
           let { content } = theCompile(
             '<div>{{ $props.msg }}</div>',
             'let $props',
@@ -834,7 +834,7 @@ describe('SFC compile <script setup>', () => {
           assertCode(content)
         })
 
-        test('should only destructure non-user-defined globals', () => {
+        test('should only destructure non-user-defined properties', () => {
           let { content } = theCompile(
             '<div>{{ $attrs }}{{ $slots }}{{ $emit }}{{ $props }}</div>',
             'let $attrs',
@@ -857,6 +857,7 @@ describe('SFC compile <script setup>', () => {
           )
           expect(content).toMatch('setup(__props, { emit: __emit })')
           expect(content).toMatch('const emit = __emit')
+          expect(content).not.toMatch('const $emit = __emit')
           assertCode(content)
         })
       })
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 4ad8282a181..c2fcc46c073 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -247,15 +247,7 @@ export function compileScript(
   ) {
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
-    const theImport = {
-      isType,
-      imported,
-      local,
-      source,
-      isFromSetup,
-      isUsedInTemplate: needTemplateUsageCheck,
-    }
-
+    let isImportUsed = needTemplateUsageCheck
     if (
       needTemplateUsageCheck &&
       ctx.isTS &&
@@ -263,10 +255,17 @@ export function compileScript(
       !sfc.template.src &&
       !sfc.template.lang
     ) {
-      theImport.isUsedInTemplate = isUsedInTemplate(local, sfc)
+      isImportUsed = isUsedInTemplate(local, sfc)
     }
 
-    ctx.userImports[local] = theImport
+    ctx.userImports[local] = {
+      isType,
+      imported,
+      local,
+      source,
+      isFromSetup,
+      isUsedInTemplate: isImportUsed,
+    }
   }
 
   function checkInvalidScopeReference(node: Node | undefined, method: string) {
@@ -286,8 +285,42 @@ export function compileScript(
     })
   }
 
+  function buildDestructureElements() {
+    if (!sfc.template || !sfc.template.ast) return
+
+    const builtins = {
+      $props: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => setupPreambleLines.push(`const $props = __props`),
+      },
+      $emit: {
+        bindingType: BindingTypes.SETUP_CONST,
+        setup: () =>
+          ctx.emitDecl
+            ? setupPreambleLines.push(`const $emit = __emit`)
+            : destructureElements.push('emit: $emit'),
+      },
+      $attrs: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => destructureElements.push('attrs: $attrs'),
+      },
+      $slots: {
+        bindingType: BindingTypes.SETUP_REACTIVE_CONST,
+        setup: () => destructureElements.push('slots: $slots'),
+      },
+    }
+
+    for (const [name, config] of Object.entries(builtins)) {
+      if (isUsedInTemplate(name, sfc) && !ctx.bindingMetadata[name]) {
+        config.setup()
+        ctx.bindingMetadata[name] = config.bindingType
+      }
+    }
+  }
+
   const scriptAst = ctx.scriptAst
   const scriptSetupAst = ctx.scriptSetupAst!
+  const inlineMode = options.inlineTemplate
 
   // 1.1 walk import declarations of <script>
   if (scriptAst) {
@@ -304,7 +337,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             false,
-            !options.inlineTemplate,
+            !inlineMode,
           )
         }
       }
@@ -372,7 +405,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             true,
-            !options.inlineTemplate,
+            !inlineMode,
           )
         }
       }
@@ -813,50 +846,14 @@ export function compileScript(
   }
 
   const destructureElements =
-    ctx.hasDefineExposeCall || !options.inlineTemplate
-      ? [`expose: __expose`]
-      : []
+    ctx.hasDefineExposeCall || !inlineMode ? [`expose: __expose`] : []
   if (ctx.emitDecl) {
     destructureElements.push(`emit: __emit`)
   }
 
-  // generate $props, $emit, $attrs, $slots
-  if (options.inlineTemplate) {
-    if (sfc.template && sfc.template.ast) {
-      // $props
-      if (
-        isUsedInTemplate('$props', sfc) &&
-        !('$props' in ctx.bindingMetadata)
-      ) {
-        setupPreambleLines.push(`const $props = __props`)
-        ctx.bindingMetadata['$props'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-      // $emit
-      if (isUsedInTemplate('$emit', sfc) && !('$emit' in ctx.bindingMetadata)) {
-        if (ctx.emitDecl) {
-          setupPreambleLines.push(`const $emit = __emit`)
-        } else {
-          destructureElements.push('emit: $emit')
-        }
-        ctx.bindingMetadata['$emit'] = BindingTypes.SETUP_CONST
-      }
-      // $attrs
-      if (
-        isUsedInTemplate('$attrs', sfc) &&
-        !('$attrs' in ctx.bindingMetadata)
-      ) {
-        destructureElements.push('attrs: $attrs')
-        ctx.bindingMetadata['$attrs'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-      // $slots
-      if (
-        isUsedInTemplate('$slots', sfc) &&
-        !('$slots' in ctx.bindingMetadata)
-      ) {
-        destructureElements.push('slots: $slots')
-        ctx.bindingMetadata['$slots'] = BindingTypes.SETUP_REACTIVE_CONST
-      }
-    }
+  // destructure built-in properties (e.g. $emit, $attrs, $slots)
+  if (inlineMode) {
+    buildDestructureElements()
   }
 
   if (destructureElements.length) {
@@ -866,10 +863,7 @@ export function compileScript(
   let templateMap
   // 9. generate return statement
   let returned
-  if (
-    !options.inlineTemplate ||
-    (!sfc.template && ctx.hasDefaultExportRender)
-  ) {
+  if (!inlineMode || (!sfc.template && ctx.hasDefaultExportRender)) {
     // non-inline mode, or has manual render in normal <script>
     // return bindings from script and script setup
     const allBindings: Record<string, any> = {
@@ -969,7 +963,7 @@ export function compileScript(
     }
   }
 
-  if (!options.inlineTemplate && !__TEST__) {
+  if (!inlineMode && !__TEST__) {
     // in non-inline mode, the `__isScriptSetup: true` flag is used by
     // componentPublicInstance proxy to allow properties that start with $ or _
     ctx.s.appendRight(
@@ -1018,7 +1012,7 @@ export function compileScript(
 
   // <script setup> components are closed by default. If the user did not
   // explicitly call `defineExpose`, call expose() with no args.
-  if (!ctx.hasDefineExposeCall && !options.inlineTemplate)
+  if (!ctx.hasDefineExposeCall && !inlineMode)
     setupPreambleLines.push(`__expose();`)
 
   const setupPreamble = setupPreambleLines.length
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index ff15ed23d5a..6fc16db446b 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -12,6 +12,9 @@ import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
 
 /**
  * Check if an identifier is used in the SFC's template.
+ * - 1.used to determine the properties that should be included in the object returned from setup()
+ *   when not using inline mode.
+ * - 2.check whether the built-in properties such as $attrs, $slots, $emit are used in the template
  */
 export function isUsedInTemplate(
   identifier: string,