fix(compiler-core): No access this through function declaration in <script setup>

packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts

@@ -613,6 +613,7 @@ describe('compiler: expression transform', () => {
       props: BindingTypes.PROPS,
       setup: BindingTypes.SETUP_MAYBE_REF,
       setupConst: BindingTypes.SETUP_CONST,
+      setupLet: BindingTypes.SETUP_LET,
       data: BindingTypes.DATA,
       options: BindingTypes.OPTIONS,
       reactive: BindingTypes.SETUP_REACTIVE_CONST,
@@ -658,6 +659,16 @@ describe('compiler: expression transform', () => {
       expect(code).toMatchSnapshot()
     })
 
+    // #6822
+    test('no access this through function declaration', () => {
+      const { code } = compileWithBindingMetadata(
+        `<div @click="setupConst()" @keyup="setupLet()" @keydown="setup()"></div>`,
+      )
+      expect(code).toMatch(`$setup.setupConst.bind()`)
+      expect(code).toMatch(`$setup.setupLet.bind()`)
+      expect(code).toMatch(`$setup.setup.bind()`)
+    })
+
     test('literal const handling', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ literal }}</div>`, {
         inline: true,

packages/compiler-core/__tests__/transforms/vOn.spec.ts

@@ -1,4 +1,5 @@
 import {
+  BindingTypes,
   type CompilerOptions,
   type ElementNode,
   ErrorCodes,
@@ -760,5 +761,30 @@ describe('compiler: transform v-on', () => {
         },
       })
     })
+
+    test('variable function handler ', () => {
+      const { node } = parseWithVOn(`<div v-on:click="foo" />`, {
+        prefixIdentifiers: true,
+        cacheHandlers: true,
+        bindingMetadata: {
+          foo: BindingTypes.SETUP_LET,
+        },
+      })
+      const vnodeCall = node.codegenNode as VNodeCall
+      expect(
+        (vnodeCall.props as ObjectExpression).properties[0].value,
+      ).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.COMPOUND_EXPRESSION,
+          children: [
+            `(...args) => (`,
+            { content: `$setup.foo && $setup.foo.call(undefined, ...args)` },
+            `)`,
+          ],
+        },
+      })
+    })
   })
 })

packages/compiler-core/src/transforms/transformExpression.ts

@@ -212,7 +212,10 @@ export function processExpression(
         type === BindingTypes.LITERAL_CONST
       ) {
         // setup bindings in non-inline mode
-        return `$setup.${raw}`
+        // #6822 No access `this` through function declaration in <script setup>
+        return parent && parent.type === 'CallExpression'
+          ? `$setup.${raw}.bind()`
+          : `$setup.${raw}`
       } else if (type === BindingTypes.PROPS_ALIASED) {
         return `$props['${bindingMetadata.__propsAliases![raw]}']`
       } else if (type) {

packages/compiler-core/src/transforms/vOn.ts

@@ -119,7 +119,11 @@ export const transformOn: DirectiveTransform = (
       // avoiding the need to be patched.
       if (shouldCache && isMemberExp) {
         if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-          exp.content = `${exp.content} && ${exp.content}(...args)`
+          if (exp.content.startsWith('$setup')) {
+            exp.content = `${exp.content} && ${exp.content}.call(undefined, ...args)`
+          } else {
+            exp.content = `${exp.content} && ${exp.content}(...args)`
+          }
         } else {
           exp.children = [...exp.children, ` && `, ...exp.children, `(...args)`]
         }